第七十二篇 jquery基础

Posted itboy-newking

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第七十二篇 jquery基础相关的知识,希望对你有一定的参考价值。

一、jQuery引入

# 导读

JQuery
jq就是js工具库,即一系列功能的集合体
jq内部语法采用的就是原生js
jq环境如何搭建:在需要使用jq的html中引入JQuery.js文件即可
本地导入(导入下好的文件)

<script src="js/jquery-3.4.1.min.js"></script>

cdn导入(链接外部资源--网上的文件:jquery CDN)

jq选择器
使用\$('\#id')    会走 getelementbyid
使用$('.class')  //才会走queryselectorall

jq对象转化为js对象
//jq对象是一个数组,通过索引取值
js对象转化为jq对象
//直接将js对象扔到$()中转为jq对象

jq事件
点击对象,获取对象,然后绑定事件 
1.$('.box').click(fn)
2.$('box').on('click', fn)
fn尽量写全:function () 
不要用 $("box").on('click', () => ); //获取的是window

* 只要是值,就可以用函数来返回

jq操作内容
let $inp = $('.inp')
let $div = $('.div')
1.$inp.val(不写|"新值"|fn(index, oldvalue))
2.$div.text()
3.$.html()
改标题
touppercase() 字符串大写

jq样式操作
let $div = $('.div')
1.$div.css('属性值')
2.$div.css("属性名", "属性值")
3.$div.css()
4.$div.addClass()
5.$div.removeClass()
6.$div.hasClass()

let $box = $('.box');
$box.click(function () 
    let e
)

1.jq API

http://jquery.cuishifeng.cn/

2.jq初识

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq初始</title>
</head>
<body>
    <h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
    <h2>jq内部语法采用的就是原生js</h2>
    <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
    <h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2>
</body>

<!-- CDN 连接 外部资源 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->

<script src="js/jquery-3.4.1.js"></script>
<script>
    // jQuery对象
    console.log(jQuery);
    console.log($);
    console.log(Owen);

    console.log($('h1'));
    $('h1').click(function () 
        $('h1').css('color', 'red')
    )
</script>
</html>

二、jq选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <div id="d" class="box"></div>
    <input type="text" id="d2" class="box" />
    <h3 class="h3"></h3>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // jq选择器:$('css选择器语法')
    let $div = $('#d');
    console.log($div);

    let $boxs = $('.box');
    console.log($boxs);

    // jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
    // 就是通过索引取值
    let div = $div[0];
    console.log(div);

    console.log(document.getElementsByClassName('box')[0]);
    console.log(document.querySelectorAll('.box')[0]);
    console.log($div[0]);
    console.log($boxs[0]);
    console.log($boxs[1]);

    // js如何转换为jq对象
    let $newDiv = $(div);
    console.log($newDiv);

</script>
</html>

三、jq事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq事件</title>
    <style>
        .box 
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-bottom: 10px;
        
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let $box = $('.box');
    // $box.click(function () 
    //     // this就是被点击的标签 - js对象
    //     console.log(this);
    //     console.log($(this));
    // );

    // jq对象可以完成事件的批量绑定
    $box.on('click', function () 
        console.log(this);
        console.log(this.innerText);
        console.log($(this));
    );

    // js必须手动循环 绑定
    // let boxs = document.querySelectorAll('.box');
    // for (box of boxs) 
    //     box.onclick = function () 
    //         console.log(this);
    //         console.log($(this));
    //     
    // 

</script>
</html>

四、jq内容操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq内容操作</title>
</head>
<body>
    <h1 class="title">标题</h1>
    <input type="text" class="title">
    <button class="btn">改标题</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // js - jsObj.value | jsObj.innerText | jsObj.innerHTML
    // jq - jqObj.val() | jqObj.text() | jqObj.html()
    // 取值:jqObj.text() | jqObj.text('新值') | jqObj.text(fn)

    let $btn = $('.btn');
    let $inp = $('input.title');
    let $h1 = $('h1.title');

    $btn.click(function () 
        let val = $inp.val();
        if (val) 
            // $h1.text(val);
            $h1.html(val);
            $inp.val(function (index, oldValue) 
                // return oldValue.toUpperCase()
                return ''
            )
        
    )
</script>
</html>

五、jq样式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq样式操作</title>
    <style>
        .box 
            /*width: 200px;*/
            height: 200px;
            background-color: pink;
        
        .sup-box 
            /*width: 400px;*/
            height: 100px;
            background-color: orange;
            border-radius: 50%;
            line-height: 100px;
            text-align: center;
            color: red;
        
    </style>
</head>
<body>
    <div class="box" style="width: 600px">文本</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    let $box = $('.box');

    $box.click(function () 
        // 获取
        let width = $box.css('width');
        console.log(width);

        // 单个设置
        $box.css('background-color', function (index, oldvalue) 
            console.log(oldvalue);
            return 'red'
        );

        // 多条设置
        $box.css(
            width: '100px',
            height: '100px',
            backgroundColor: 'blue',
        );

        if ($box.hasClass('sup-box')) 
            $box.removeClass('sup-box')
         else 
            $box.addClass(function (index, oldvalue) 
                console.log(index, oldvalue);
                return 'sup-box'
            )
        
    )
    
</script>
<script>
    // localStorage['name'] = 'owen';
    // sessionStorage['age'] = 18;
</script>
</html>

以上是关于第七十二篇 jquery基础的主要内容,如果未能解决你的问题,请参考以下文章

python进阶

第七十二课 图的存储结构(上)

leetcode 简单 第七十二题 各位相加

Android实战简易教程-第七十二枪(PopupWindow浮动窗)

“全栈2019”Java第七十一章:外部类访问静态内部类成员详解

Python自动化开发