jQuery一 Li.068

jQuery 介绍

jQuery是一个JavaScript库
封装了很多预定义的函数, 获取元素, 执行隐藏移动等
目的就是在使用时直接调用, 不需要再重复定义, 这样就可以极大地简化了JavaScript编程

jQuery 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门jQuery</title>
</head>
<body>
    <div id="div">我是div</div>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // let div = document.getElementById("div");
    // alert(div.innerText)


    // jQuery 方式

    let jqDiv = $("#div");
    alert(jqDiv)
    alert(jqDiv.html())
</script>
</html>

JS对象和jQuery对象黑的

jQuery本质上虽然也是JS, 但如果想使用jQuery的属性和方法那么必须保证对象是jQuery对象, 而不是JS方式获得的DOM对象
二者的API方法不能混合使用, 若想使用对方的API, 需要进行对象转换
JS的DOM对象黑的成jQuery对象
- $(JS的DOM对象);
jQuery对象转换成jQuery对象
- jQuery对象[索引];
- jQuery对象.get(索引);

<body>
<div id="div">我是div</div>

</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // js 方式, 通过id获取div元素
    // JS对象  转换    jQuery对象
    let div1 = document.getElementById("div");
    jsDiv1 = $(div1)
    alert(jsDiv1.html())


    // jQuery对象  转换  DOM对象

    let jqDiv2 = $("#div");
    let div2 = jqDiv2[0]
    alert(div2.innerText)

    let div3 = jqDiv2.get(0)
    alert(div3.innerText)

</script>

jQuery事件的使用

常用事件
jQuery中将事件封装成了对应的方法. 去年了JS中的.on语法.

事件名 说明
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变真苦域的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的使用</title>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <br>
    <input type="text" id="input">
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    let btn = $("#btn")
    btn.click(check)
    function check(){
        alert("点我干嘛")
    }

    $("#btn").click(function () {
        alert("匿名函数")
    })


    // 获取焦点事件
    let input = $("#input")
    input.focus(getFocus)
    function getFocus(){
        // alert("你要输入数据了")
    }

    input.blur(loseFocus)
    function loseFocus(){
        alert("你输入完成了")
    }

</script>
</html>

事件的绑定和解绑

绑定事件
- jQuery对象.on(事件名称,执行的功能);
解绑事件
- jQuery对象.off(事件名称) 如果不指定事件名称,则会把该对象绑定的所有事件都解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定和解绑</title>
</head>
<body>
    <input type="button" id="btn1" value="点我">
    <input type="button" id="btn2" value="解绑">
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // 1. 给btn1 绑定一个单击的事件
    let btn1 = $("#btn1");
    btn1.on("click", cc)
    function cc(){
        alert("点我干嘛")
    }

    let btn2 = $("#btn2")
    btn2.on("click", jiebang)
    function jiebang(){
        btn1.off("click")
    }
</script>
</html>

事件的切换

事件的切换: 需要给同一个对象绑定多个事件, 而且多个事件还有先后顺序关系
方式一: 单独定义
- $(元素).事件方法名(要执行的功能);
- $(元素).事件方法名(要执行的功能);
方式二: 链式定义
- $(元素).事件方法名1(要执行的功能).事件方法名2(要执行的功能) …

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的切换</title>
    <style>
        #div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="div">dvi</div>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // 方式一, this的使用

    // $("#div").mouseover(function () {
    //     $(this).css("background","red");
    // })

    // 方式一, 单独定义
    let div = $("#div");
    // div.on("mouseover", changeRed)
    // div.on("mouseout",changeBlue)
    function changeRed(){
        div.css("background-color","red")
    }
    function changeBlue(){
        div.css("background-color","blue")
    }

    // 方式二, 链式定义
    div.on("mouseover", changeRed).on("mouseout",changeBlue)

</script>
</html>

遍历

方式一: 传统方式

for (let i=0;i<窗口对象长度;i++){
    执行功能;
}

方式二:对象.each()方法

容器对象.each(function(index,ele){
    执行功能;
})

方式三:$.each()方法

$.each(容器对象,function(index.ele){
    执行功能;
});

方式四: for of 语句

for(ele of 容器对象){
    执行功能;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
</head>
<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>前端</li>
        <li>后端</li>
        <li>全占工程师</li>
    </ul>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>

    $("#btn").on("click", showCicle4);

    // 方式一: 传统方式
    let lis = document.getElementsByTagName("li");

    function showCicle1(){
        for(let i=0; i< lis.length; i++){
            console.log(lis[i].innerHTML+" ")
        }
        document.write("<br/>")
    }


    // 方式二: 对象.each()方法
    let lis2 = $("li")
    function showCicle2(){
        lis2.each(function(index,ele){
            console.log(ele.innerHTML+" ")
        });
        document.write("<br/>")
    }


    // 方式三: $.each()方法
    let lis3 = $("li")
    function showCicle3(){
        $.each(lis3,function(index,ele){
            console.log(ele.innerHTML+" ")
        });
        document.write("<br/>")
    }

    // 方式四: ele of 容器
    let lis4 = $("li")
    function showCicle4(){
        for(ele of lis4){
            console.log(ele.innerHTML+" ")
        }
        document.write("<br/>")
    }
</script>
</html>

jQuery 基本选择器

id选择器, 类选择器, 元素选择器, 属性选择器等等
jQuery中选择器的语法:$()
基本选择器

选择器     语法              作用
元素选择器 $("元素名称");    根据元素名称获取元素对象们
id选择器   $("#id属性值")    根据id属性值获取元素对象
类选择器   $(".class属性值") 根据class属性值获取元素对象位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
</head>
<body>
  <div id="#div1">div1</div>
  <div class="div2">div2</div>
  <div class="div2">div3</div>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    let divs = $("div")
    alert(divs.length)

    let div1 = $("#div1");
    alert(div1)

    let div2 = $(".div2")
    alert(div2.length)
</script>
</html>

jQuery 层级选择器

选择器     语法       作用
后代选择器 $("A B")   A下的所有B(包括B的子级)
子选择器   $("A > B") A下的所有B(不包括B的子级)
兄弟选择器 $("A + B") A相邻的下一个B
兄弟选择器 $("A ~ B") A相邻的所有B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
</head>
<body>

    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>
    <div></div>
    <p>p1</p>
    <p>p2</p>

</body>
<script src="../jQuery/jquery-3.6.0.js "></script>
<script>
    // 1. 后代选择器 $("A B") A下的所有B(包括B的子级)
    let spans = $("div span");
    // alert(spans.length)

    // 子选择器   $("A > B") A下的所有B(不包括B的子级)
    let spans2 = $("div > span")
    // alert(spans2.length)

    // 兄弟选择器 $("A + B") A相邻的下一个B
    let p1 = $("div+p")
    alert(p1.html())

    // 兄弟选择器 $("A ~ B") A相邻的所有B
    let p2 = $("div ~ p")
    alert(p2.length+" "+p2[0].innerHTML)

</script>
</html>

jQuery 属性选择器

选择器       语法                   作用
属性名选择器 $("A[属性名]");        根据指定属性名获取元素对象们
属性值选择器 $("A[属性名=属性值]"); 根据指定属性名和属性值获取元素对象们

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<body>

<input type="text">
<input type="password">
<input type="password">

</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // 属性名选择器 $("A[属性名]");        根据指定属性名获取元素对象们
    let inputs = $("input[type]");
    // alert(inputs.length)

    // 属性值选择器 $("A[属性名=属性值]"); 根据指定属性名和属性值获取元素对象们
    let inputs2 = $("input[type='password']")
    alert(inputs2.length)

</script>
</html>

jQuery 过滤器选择器

选择器         语法             作用
首元素选择器   $("A:first");    获得选择的元素中的第一个元素
尾元素选择器   $("A:last");     获得选择的元素中的最后一个元素
非元素选择器   $("A:not(B)");   不包括指定内容的元素
偶数选择器     $("A:even");     偶数,从0开始计数
奇数选择器     $("A:odd");      奇数,从0开始计数
等于索引选择器 $("A:eq(index)") 指定索引元素,和数组索引一致
大于索引选择器 $("A:gt(index)") 大于指定索引元素
小于索引选择器 $("A:lt(index)") 小玩指定索引元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器选择器</title>
</head>
<body>
<div>div1</div>
<div id="div2">div2</div>
<div>div3</div>
<div>div4</div>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // 首元素选择器   $("A:first");    获得选择的元素中的第一个元素
    let divFirst = $("div:first");
    // alert(divFirst.html())

    // 尾元素选择器   $("A:last");     获得选择的元素中的最后一个元素
    let divLast = $("div:last");
    // alert(divLast.html())

    // 非元素选择器   $("A:not(B)");   不包括指定内容的元素
    let divs3 = $("div:not(#div2)")
    // alert(divs3.length)

    // 偶数选择器     $("A:even");     偶数,从0开始计数
    let divs4 = $("div:even")
    // alert(divs4.length)
    // alert(divs4[0].innerHTML)
    // alert(divs4[1].innerHTML)

    // 奇数选择器     $("A:odd");      奇数,从0开始计数
    let divs5 = $("div:odd")
    // alert(divs5.length)
    alert(divs5[0].innerHTML)
    alert(divs5[1].innerHTML)

    // 等于索引选择器 $("A:eq(index)") 指定索引元素,和数组索引一致
    let divs6 = $("div:eq(2)")
    // alert(divs6.html())

    // 大于索引选择器 $("A:gt(index)") 大于指定索引元素
    let divs7 = $("div:gt(0)")
    // alert(divs7.length)

    // 小于索引选择器 $("A:lt(index)") 小玩指定索引元素
    let divs8 = $("div:lt(4)")
    // alert(divs8.length)

</script>
</html>

jQuery 表单属性选择器

选择器                  语法             作用
可用元素选择器          $("A:enabled");  获得可用元素
不可用元素选择器        $("A:disabled"); 获得不可用元素
单选/复选框被选中的元素 $("A:checked");  获得单选/复选框被选中的元素
下拉框被选中的元素      $("A:selected"); 获得下拉框选中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单选择器</title>
</head>
<body>
<input type="text" disabled>
<input type="text">
<input type="radio" name="gender" value="men" checked>男
<input type="radio" name="gender" value="women">女
<input type="checkbox" name="hobby" value="study" checked>
<input type="checkbox" name="hobby" value="sleep" checked>

<select>
    <option>---请选择---</option>
    <option selected>本科</option>
    <option>专科</option>
</select>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // 可用元素选择器          $("A:enabled");  获得可用元素
    let inputs1 = $("input:enabled");
    // alert(inputs1.length)

    // 不可用元素选择器        $("A:disabled"); 获得不可用元素
    let inputs2 = $("input:disabled");
    // alert(inputs2.length)

    // 单选/复选框被选中的元素 $("A:checked");  获得单选/复选框被选中的元素
    let inputs3 = $("input:checked");
    // alert(inputs3.length)

    // 下拉框被选中的元素      $("A:selected"); 获得下拉框选中的元素
    let selects1 = $("option:selected")
    alert(selects1.get(0).innerHTML)

</script>
</html>

jQuery 介绍#

jQuery 快速入门#

JS对象和jQuery对象黑的#

jQuery事件的使用#

事件的绑定和解绑#

事件的切换#

遍历#

jQuery 基本选择器#

jQuery 层级选择器#

jQuery 属性选择器#

jQuery 过滤器选择器#

jQuery 表单属性选择器#

jQuery 介绍

jQuery 快速入门

JS对象和jQuery对象黑的

jQuery事件的使用

事件的绑定和解绑

事件的切换

遍历

jQuery 基本选择器

jQuery 层级选择器

jQuery 属性选择器

jQuery 过滤器选择器

jQuery 表单属性选择器