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

最新推荐文章于 2024-01-14 11:54:30 发布

皮皮潇冲冲冲

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量107

点赞数

分类专栏：前端笔记文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_46303867/article/details/113192685

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

修改时间：2021年1月27日
作者：pp_x
邮箱：pp_x12138@163.com

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>

皮皮潇冲冲冲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的认识和使用（jQuery选择器、事件、遍历、效果）

学习笔记输出来源：拉勾教育Java就业急训营修改时间：2021年1月24日作者：pp_x邮箱：[email protected]文章目录jQueryjQuery介绍jQuery能做什么jQuery的优势jQueryjQuery介绍jQuery由美国人ohn Resig（约翰·莱西格）于2006年创建jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装它的设计思想是write less,do morejQuery能做什么访问和操作DO.
复制链接

扫一扫