四、jQuery笔记

（一）jQuery概述

jQuery本身是js的一个轻量级的库，封装了一个对象jQuery，jquery的所有语法都在jQuery对象中

浏览器不认识jquery，只渲染html、css和js代码，需要先导入jQuery文件，官网下载即可

jQuery中文说明文档：https://hemin.cn/jq/

（二）jQuery要点

1、jQuery对象

通过jQuery包装DOM对象后产生的对象。

jQuery对象用$符号表示

给jQuery对象命名引用时，通常标识符前面加个$符，与DOM对象的引用区分开来

jQuery代码和js代码可以混着用，比如绑定事件处理函数仍旧可以用js的几种方式，只是js对象调用DOM方法和属性，jQuery对象也调用自己的方法

DOM对象和jQuery对象可以互相转换：

用$符号把DOM对象括起来就变成了jQuery对象，如：$(this)

jQuery加上[0]就变成了DOM对象，如：$("p")[0]

2、jQuery的语法

可以概括为$(selector).action()的形式，

2.1 selector

选择器和筛选器：

id选择器拿到的是唯一的标签对象；

其他选择器得到的是标签对象数组；

jquery会自动循环处理每个元素，不用自己再写循环语句一个个处理

（1）基本选择器

基本格式：$("css-selector")

（1.1）通用选择器

$("*").css("color", "green")

（1.2）id选择器

$("#jquery").css("color", "red")

（1.3）class选择器

$(".hl").css("color", "gold")

（1.5）标签选择器

$("div").css("color", "black")

（1.6）并列多选选择器

$(".hl,div").css("color", "gold")

（2）层级选择器

（2.1）后代选择器

$(".hl div").css("color", "red")

（2.2）子代选择器

$(".hl>div").css("color", "red")

（2.3）毗邻选择器(下面紧挨着的兄弟标签)

$(".hl+p").css("color", "blue")

（2.4）下方兄弟选择器（不用紧挨着）

$(".hl~p").css("color", "red")

（3）属性选择器

$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")

（4）表单选择器（只有inpput的type属性才行）

$(":text").css("color", "blue")

（5）基本筛选器

（5.1）first：第一个

$(".hl~p:first").css("color", "gold")

（5.2）last：最后一个

$(".hl~p:last").css("color", "gold")

（5.3）eq(index)：指定索引序号

$(".hl~p:eq(0)").css("color", "gold")

（5.4）even：奇数行

$(".hl~p:even").css("color", "gold")

（5.5）odd：偶数行

$(".hl~p:odd").css("color", "gold")

（5.6）gt(index)：大于指定索引序号

$(".hl~p:gt(0)").css("color", "gray")

（5.7）lt(index)：小于指定索引序号

$(".hl~p:lt(2)").css("color", "gray")

（6）过滤筛选器

$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性，返回boolean值

（7）查找筛选器

//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签（不包含）的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签（不包含）上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签（不包含）的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数，类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")

（8）练习-左侧菜单

<body>
    <div style="clear: both">练习-左侧菜单：<br>
        <div class="outer2">
            <div class="menu">
                <div class="item">
                    <div class="title" onclick="f1(this)">菜单一</div>
                    <div class="con">
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title" onclick="f1(this)">菜单二</div>
                    <div class="con hide">
                        <div>222</div>
                        <div>222</div>
                        <div>222</div>
                    </div>
                </div>
                <div class="item">
                    <div class="title" onclick="f1(this)">菜单三</div>
                    <div class="con hide">
                        <div>333</div>
                        <div>333</div>
                        <div>333</div>
                    </div>
                </div>
            </div>
            <div class="content"></div>
        </div>
    </div>
</body>

function f1(self) {
    $(self).next().removeClass("hide");
    $(self).parent().siblings().children(".con").addClass("hide");
}

2.2 action()

jQuery操作属性的方法

（1）标签属性类

// 获取属性值
console.log($(".attr1 .a1").attr("class")) 
//设置属性值，不适用设置input标签的checked属性，因为不默认选中（手动勾选）是undefined，默认选中是cheched
$(".attr1 .a1").attr("class", "a2") 
// 删除属性
$(".attr1 .a1").removeAttr("class") 
//获取固有属性值，不适用自定义属性，因为prop找不到，获取到的是undefined，但适用input标签的checked属性，因为其值是true或false
console.log($(".attr1 .a2").prop("class")) 
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class") 
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此，需要使用prop方法去操作才能获得正确的结果。

（2）css样式类

// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});

（3）HTML代码/文本/值

$(".attr1 .a3").html("456<h1>123</h1>") //相当于js的innerHTML，加参数是替换原本内容
$(".attr1 .a3").text("<p>111</p>") //相当于js的innerText，加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value，不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值

（4）jQuery的循环语句

方式一：

$.each(object[循环的对象，如数组], function(index[, value]){
代码块
})

方式二：

$("p").each(function(){
代码块；//每一个标签对象是$(this)
})

//1.方式一：
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){
    console.log("key:", key);   //循环object（字典）第一个参数值是：键key
    console.log("value:", value);
})
$.each(data, function(key){
    console.log("key:", key);   //循环object（字典）如果只有一个参数值是：键key
})
$.each(dl,function(index,value){
    console.log("index:", index);   //循环数组第一个参数值是：索引index
    console.log("value:", value);
})
$.each(dl,function(index){
    console.log("index:", index);   //循环数组如果只有一个参数值是：索引index
})
//2.方式二：
$("li").each(function(){
    console.log("$(this):", $(this));
    console.log("$(this).html():", $(this).html());
})

（5）练习-正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        function selectall(){
            $("table :checkbox").prop("checked",true)
        }
        function cancel(){
            $("table :checkbox").prop("checked",false)
        }
        /*js写法
        function reverse(){
            let idlist=$("table :checkbox")
            for(let i=0;i<idlist.length;i++){
                let element=idlist[i];
                let ischecked=$(element).prop("checked")
                if (ischecked){
                    $(element).prop("checked",false)
                }else {
                    $(element).prop("checked",true)
                }
            }
        }                
        */
        /*jQuery循环方式*/
        function reverse(){
            $("table :checkbox").each(function(){
                $(this).prop("checked",!$(this).prop("checked"));
                if ($(this).prop("checked")){
                    $(this).prop("checked",false)
                }else {
                    $(this).prop("checked",true)
                }
            });
        }
    </script>
</head>
<body>
     <button onclick="selectall();">全选</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反选</button>

     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>
</body>
</html>

（6）jQuery支持链式查找

对一个标签对象做完操作后，可以用.继续查找其他标签对象进行操作

$("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行：
$("p").parent().addClass("hide").prev().addClass("hide")

（7）练习-模态对话框

function show(self){
    $(self).parent().next().removeClass("hide");
}
function cancel(self){
    $(self).parent().parent().addClass("hide");
}

（8）文档处理

    <div class="c1">文档操作
        <p>ppp</p>
        <button class="bo">add</button>
        <div class="lxclone">练习-复制输入框
            <div class="item">
                <button class="bc">+</button>
                <input type="text"></div>
        </div>
    </div>

$(".bo").on("click", function(){
    //1.内部插入：父标签内插入子标签
    // $(".c1").append("<h1>123</h1>"); // 创建新标签方式一：直接在append（）里面写上标签内容
    var $ele = $("<h1></h1>"); //创建新标签方式二：相当于js中var ele=document.cerateElement("h1");
    var $ele = $("<h1>"); //简化写法
    $ele.html("hello word");
    $ele.css("color", "red");
    $(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签
    $ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面
    $(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签
    $ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面
    //2.外部插入：插入兄弟标签
    $(".c1").after($ele);
    $(".c1").before($ele);
    $ele.insertAfter($(".c1"));
    $ele.insertBefore($(".c1"));
    //3.替换
    $(".c1 p").replaceWith($ele);
    //4.删除与清空
    $(".c1").empty(); //清空标签的内容，但是标签还在
    $(".c1").remove(); //删除标签
    //5.复制
    var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件
    $(".c1").after($ele2);
})

（9）练习-复制输入框

    <div class="c1">文档操作
        <p>ppp</p>
        <button class="bo">add</button>
        <div class="lxclone">练习-复制输入框
            <div class="item">
                <button class="bc">+</button>
                <input type="text"></div>
        </div>
    </div>

$(".bc").click(function (){
    var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增，因为复制出来的也是一个class属性，也会被复制
    var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制，每次就是复制一个
    $cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");
    $(".lxclone").append($cloneObj);
});
function removeObj(self){
    $(self).parent().remove();
}

3、css操作

<div class="cssop">CSS操作
    <p id="ys">1.样式</p>
    
    <div id="offsetdiv">2.位置
        <div class="div1">2.1-offset相对视口偏移量</div>
        <div class="div2">2.2-position相对已定位父级偏移量</div>
    </div>
    <div class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px">返回顶部</div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>

3.1 样式

$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});

3.2 位置

//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象，有top和left两个属性：是相对于视口（窗口）的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象，有top和left两个属性：是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){
    if($(window).scrollTop()>100){ //窗口滚动滑轮距离顶部的距离
        $(".gotop").removeClass("hide")
    } else {
        $(".gotop").addClass("hide")
    }
}
$(".gotop").click(function(){
    $(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("<button>");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("<button class='aftb hide'>回顶部</button>");
$("#offsetdiv .div2").html("<h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1>")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){
    if($(this).scrollTop()>0){ //窗口滚动滑轮距离顶部的距离
        $(".aftb").removeClass("hide")
    } else {
        $(".aftb").addClass("hide")
    }
});
$(".aftb").click(function(){
    $("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,（左右滑轮，类似上下滑轮）

3.3 尺寸

console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度

3.4 索引

$("ul li").index(); //获取标签集合的索引

四、jQuery笔记

（一）jQuery概述

（二）jQuery要点

1、jQuery对象

2、jQuery的语法

2.1 selector

（1）基本选择器

（1.1）通用选择器

（1.2）id选择器

（1.3）class选择器

（1.5）标签选择器

（1.6）并列多选选择器

（2）层级选择器

（2.1）后代选择器

（2.2）子代选择器

（2.3）毗邻选择器(下面紧挨着的兄弟标签)

（2.4）下方兄弟选择器（不用紧挨着）

（3）属性选择器

（4）表单选择器（只有inpput的type属性才行）

（5）基本筛选器

（5.1）first：第一个

（5.2）last：最后一个

（5.3）eq(index)：指定索引序号

（5.4）even：奇数行

（5.5）odd：偶数行

（5.6）gt(index)：大于指定索引序号

（5.7）lt(index)：小于指定索引序号

（6）过滤筛选器

（7）查找筛选器

（8）练习-左侧菜单

2.2 action()

（1）标签属性类

（2）css样式类

（3）HTML代码/文本/值

（4）jQuery的循环语句

（5）练习-正反选

（6）jQuery支持链式查找

（7）练习-模态对话框

（8）文档处理

（9）练习-复制输入框

3、css操作

3.1 样式

3.2 位置

3.3 尺寸

3.4 索引

相关文章