学习笔记输出来源：拉勾教育Java就业急训营

修改时间：2021年1月27日
作者：pp_x
邮箱：[email protected]

文章目录

jQuery

jQuery

jQuery介绍

jQuery由美国人ohn Resig（约翰·莱西格）于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

jQuery能做什么

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

jQuery的优势

体积小，压缩后只有100KB左右
强大的选择器（基于css选择器，但强大于css）
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性

jQuery的基础语法

$(selector).action();

$()：工厂函数，将DOM对象转换为jQuery对象
selector：选择器，获取需要操作的DOM对象
action()：jQuery中提供的方法

jQuery对象和DOM对象的转换

DOM对象转jQuery对象

var a = document.getElementById("name"); // a是DOM对象 
var b = $(a); // b是jQuery对象

jQuery对象转DOM对象

var a = $("#name"); // a是jQuery对象 
var b = jqObject.get(0); // b是DOM对象

选择器

元素选择器

*：所有元素
#id：id选择器
.class：类选择器
.class.class：交集选择器

层次选择器

ancestor descendant：ancestor后代中所有的descendant选择器
parent>child：parent直接子代中的child选择器
prev+next：prev选择器紧随着的next选择器
prev~sibings：prev选择器之后的虽有siblings选择器

属性选择器

[attribute]：含有attribute属性的元素
[attribute=value]：含有attribute属性且值为value的元素
[attribute !=value]：含有attribute属性且值不是value的元素
[attribute^=value]：含有attribute属性且值以value开头的元素
[attribute$=value]：含有attribute属性且值以value结尾的元素
[attribute*=value]：含有attribute属性且值包含value的元素
[s1] [s2] [sN]：满足多个条件符合属性的的元素

过滤选择器

:first：选取其中的第一个元素
:last：选取其中的最后一元素
:even：选取索引是偶数的元素
:odd：选取索引是奇数的元素
:eq(index)：选取索引等于index的元素
:gt(index)：选取索引大于index的元素
:lt(index)：选取索引小于index的元素
:not(selector)：选取不满足条件的元素
:header：选取所有的标题元素
:animated：选取所有的动画元素
:contains(text)：选取包含text的元素
:empty()：选取无子节点的元素
:checked：选取选中的元素
- hidden：选取隐藏的元素
visible：选取可见的元素

jQuery事件

鼠标事件

click()：单击鼠标事件
dblclick()：双击鼠标事件
mouseover()：鼠标移入事件
mouseout()：鼠标移出事件


<img src="img/1.jpg" width="300">
    <img src="img/1.jpg" width="300">
    <img src="img/1.jpg" width="300">

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

        $("img").click( function(){
    
    
            //点击一下，换照片
            $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
        } );

        $("img").mouseover( function(){
    
       //移动到元素上
            $(this).css( "border","2px solid red" );
        } );
        $("img").mouseout( function(){
    
        //离开元素
            $(this).css( "border","2px solid white" );
        } );
    </script>

键盘事件

keydown()：按下键盘时
keyup()：弹出键盘时

<body>
    <input type="text">
    <h3></h3>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
    $("input").keyup(function() {
    
    
       var str =  $(this).val();
       $("h3").html(str);
    });
    </script>
</body>

表单事件

focus()：获得焦点时
blur()：失去焦点时

<form action="">
        <p>帐号: <input id="a" value="请输入帐号..."> </p>
        <p>电话: <input id="b"> </p>
    </form>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //获得焦点（激活/点击一下）
        $("#a").focus(function(){
    
    
            $(this).val("");
        });

        //失去焦点（未激活/未点击）
        $("#a").blur(function(){
    
    
            $(this).val("请输入帐号...");
        });
    </script>

鼠标悬停复合事件

hover()：相当于mouseover()和mouseout()的组合

  <img src="img/3.jpg" width="400px">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
    $("img").hover(
        function(){
    
    
                $(this).css("display","none");
        },
        function(){
    
    
            $(this).css("display","block");
        }

    );
    </script>

绑定事件的另一种写法（动态绑定）

//绑定一个事件
<script src="js/jquery-3.4.1.min.js"></script>
    <script>
    $("h2").on("click",function(){
    
    
        alert("试试就逝世");
    });
    //绑定多个事件
    $("h2").on("click mouseover mouseout",function(){
    
    
        alert("试试就逝世");
    });
    </script>

jQuery效果

隐藏显示

hide(speed,callback)：隐藏文本
show(speed,callback)：显示文本
toggle()：切换hide()和show()
speed：规定隐藏显示的速度
callback ：隐藏后显示后执行函数的名称

$("button").click(function(){
    
    
  $("p").hide(1000);
});

淡入淡出效果

fadeIn(speed,callback)：淡入已隐藏的元素
fadeout(speed,callback)：淡出可见元素
fadeToggle(speed,callback)：切换上面两种方法
fadeTo(speed,opacity,callback)：可以给定透明度

$("button").click(function(){
    
    
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
$("button").click(function(){
    
    
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
$("button").click(function(){
    
    
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
$("button").click(function(){
    
    
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

滑动效果

slideDown(speed,callback)：向下滑动元素
slideUp(speed,callback)：向上滑动元素
slideToggle：切换上面两种方法

$("#flip").click(function(){
    
    
  $("#panel").slideDown();
});
$("#flip").click(function(){
    
    
  $("#panel").slideUp();
});
$("#flip").click(function(){
    
    
  $("#panel").slideToggle();
});

动画效果

animate({params},speed,callback)：创建自定义动画
可以使用相对值+=或者-=
可以使用与定制show、hide、toggle等
可以使用队列功能，多个效果依次执行

$("button").click(function(){
    
    
  var div=$("div");
  div.animate({
    
    height:'300px',opacity:'0.4'},"slow");
  div.animate({
    
    width:'300px',opacity:'0.8'},"slow");
  div.animate({
    
    height:'100px',opacity:'0.4'},"slow");
  div.animate({
    
    width:'100px',opacity:'0.8'},"slow");
});

callback

动画执行到100后执行的函数
错误的

$("p").hide(1000);
alert("The paragraph is now hidden");

正确的

$("p").hide(1000,function(){
    
    
alert("The paragraph is now hidden");
});

jQuery的DOM操作

获取和设置值的操作

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 获取属性

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
    
    
            //alert($("input").val()); //input框中的值
            //$("input").val("哈哈哈"); //修改input框中的值   

            //alert( $("div").html() ); //获得div中的内容（包含标签信息）
            //alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
           //$("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
            $("div").html("<i>祖国万岁!</i>")//全部覆盖 写进去的是html语句
        });
    </script>
</body>
</html>

节点的操作

子节点插入操作
- $(A)append(B)：B追加到A的末尾
- $(A)appendTo(B)：A追加到B的末尾
- $(A)prepend(B)：B插入到A的前面
- $(A)prepend(B)：A插入到B的前面
同辈节点插入操作
- $(A).after (B)：表示将B插入到A之后
- $(A). insertAfter (B)：表示将A插入到B之后
- $(A). before (B)：)表示将B插入至A之前
- $(A). insertBefore (B)：表示将A插入到B之前
其他操作
- replaceWith()：将参数替换调用对象
- replaceAll()：将调用对象替换成参数
- clone()：复制当前节点
- remove()：删除整个节点
- empty()：清空节点内容

<script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#test").click(function(){
    
    
            var bookname = $("input").val();
            var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点

            /*添加子节点*/
            //$("ul").append(newli); // newli添加到ul后面
            //newli.appendTo("ul"); // newli添加到ul后面
            //$("ul").prepend(newli); // newli添加到ul前面
            //newli.prependTo("ul");

            /*添加同辈节点*/
            //$("li:last").after( newli ); // newli添加到最后的li的后面
            //newli.insertAfter("li:last");
            //$("li:last").before(newli); //newli添加到最后的li的前面
            //newli.insertBefore("li:last");

            /*替换节点*/
            //$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
            //newli.replaceAll( "li:eq(1)" );
            
            /*复制节点*/
            //$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面
            $("ul").clone().insertAfter("ul");
            /*删除节点*/
            //$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
            //$("li:eq(1)").remove(); //删除节点

        });
    </script>

类样式的操作

addClass：为元素添加类样式
removeClass：将元素的类样式移出
toggleClass()：上述两者的切换

<style>
    div{
    
    
        width: 100px;
        height: 100px;
        background-color: #000;
    }   

    .a{
    
    
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
    
    
        border:5px dashed darkcyan;
        opacity: 0.6;
    }

    .cn{
    
    
       background: #000;
       color:#FFF; 
       font-family: 字魂49号-逍遥行书;
    }
</style>
<body>
    <button id="btn1">试试</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">样式切换</button>
    <hr>
    <div></div>
    <h1>中华人民共和国，万岁！</h1>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
    
    
            // $("div").addClass("a");
            $("div").addClass("a b");
        });

        $("#btn2").click(function(){
    
    
            $("div").removeClass("b");
        });

        $("#btn3").click(function(){
    
    
            $("h1").toggleClass("cn");
        });
    </script>

jQuery遍历

祖先元素遍历

parent()：返回被选元素的直接父元素。
parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素
parentsUntil()：方法返回介于两个给定元素之间的所有祖先元素

//返回直接父元素$(document).ready(function(){
    
    
  $("span").parents();
});
//返回span父元素中为ul的父元素
$(document).ready(function(){
    
    
  $("span").parents("ul");
});
//返回span到div之间的所有父元素
$(document).ready(function(){
    
    
  $("span").parentsUntil("div");
});

后代元素遍历

children()：返回被选元素的所有直接子元素。
find()：返回被选元素的后代元素，一路向下直到最后一个后代。(必须传参)

//返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
    
    
  $("div").children();
});
//返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$(document).ready(function(){
    
    
  $("div").children("p.1");
});
//返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
    
    
  $("div").find("span");
});
//返回 <div> 的所有后代：
$(document).ready(function(){
    
    
  $("div").find("*");
});

同辈元素遍历

siblings()：返回被选元素的所有同胞元素。
next()：返回被选元素的下一个同胞元素。
nextAll()：返回被选元素的所有跟随的同胞元素。
nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素。
prev()：返回被选元素的上一个同胞元素
prevAll()：返回被选元素的所有上面的同胞元素。
prevUntil()：返回介于两个给定参数之间的所有上面的同胞元素。

$(document).ready(function(){
    
    
  $("h2").siblings();
});
$(document).ready(function(){
    
    
  $("h2").siblings("p");
});
$(document).ready(function(){
    
    
  $("h2").next();
});
$(document).ready(function(){
    
    
  $("h2").nextAll();
});
$(document).ready(function(){
    
    
  $("h2").nextUntil("h6");
});

过滤遍历元素

first()：返回被选元素第一个元素。
lasr()：返回被选元素的最后一个元素。
eq()：返回被选元素中带有指定索引号的元素。
filter()：返回匹配标准的元素
not()：返回不匹配标准的所有元素
is()：返回布尔，判断是不是这种元素

<script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
    
    
            //var x = $("li").first().text(); // 第一个li
            //var x = $("li").last().text(); // 最后一个li
            //var x = $("li").eq(1).text(); // 下标为1的li
            //var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
            var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul

            alert(x);
        });
    </script>

jQuery的认识和使用（jQuery选择器、事件、遍历、效果）

文章目录

jQuery

jQuery介绍

jQuery能做什么

jQuery的优势

jQuery的基础语法

jQuery对象和DOM对象的转换

选择器

元素选择器

层次选择器

属性选择器

过滤选择器

jQuery事件

鼠标事件

键盘事件

表单事件

鼠标悬停复合事件

绑定事件的另一种写法（动态绑定）

jQuery效果

隐藏显示

淡入淡出效果

滑动效果

动画效果

callback

jQuery的DOM操作

获取和设置值的操作

节点的操作

类样式的操作

jQuery遍历

祖先元素遍历

后代元素遍历

同辈元素遍历

过滤遍历元素

猜你喜欢