jQuery

最新推荐文章于 2023-07-07 14:28:52 发布
最新推荐文章于 2023-07-07 14:28:52 发布
阅读量189 收藏
点赞数 1
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lz_hack/article/details/104724078
版权

jQuery

​ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

​ jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展，拥有便捷的插件扩展机制和丰富的插件，jQuery兼容各种主流浏览器。

jQuery使用

引入jQuery开始使用

 <script src = 'jquery-1.10.1.min.js'></script>
jQuery查找元素节点

$(字符串)

​ 参数：必须css选择器形式的字符串。

​ JQuery_选择网页元素

​ 1.模拟css选择元素

​ 2.参考css选择器的参考手册

案例

  <div id = 'div1'>div</div>
        <ul>
            <li>1111</li>
            <li class = 'box'>1111</li>
            <li name = 'hello'>1111</li>
            <li class = 'box'>1111</li>
            <li>1111</li>
        </ul>
        <ol>
            <li class = 'box'>2222</li>
            <li name = 'hello'>2222</li>
            <li>2222</li>
            <li class = 'box'>2222</li>
        </ol>
        <input type="text" name = 'hello'>

window.onload = function(){
                //id = 'div1'
                $("#div1").css("backgroundColor", 'red');

                //class = .box
                 $(".box").css("backgroundColor", 'blue');
  
								// 使用class选择器的写法 可以直接通过. 也可以根据需求添加条件
                 $("ol .box").css("backgroundColor", 'blue');


                //tagName = li
                 $("ul li").css("backgroundColor", 'orange');


                //name = hello
                $("[name=hello]").css("backgroundColor", 'green');
   
  								//第一个li标签变成粉色
                $("li:first").css("backgroundColor", 'pink');

                //最后一个
                $("li:last").css("backgroundColor", 'pink');


                //奇数位
                $("li:odd").css("backgroundColor", 'pink');
                $("li:even").css("backgroundColor", 'pink');


                //指定某一个li节点
                $("li:eq(2)").css("backgroundColor", 'pink');
 							  $("li").eq(4).css("backgroundColor","red");
   							
   						  // 指定class为box的，其他的过滤
   						  $("li").filter(".box").css("backgroundColor","blue");
    							$("li.box").css("backgroundColor", 'blue');
            }
jQuery写法__方法函数化

JQuery的写法特点

​ 1.方法函数化 （基本上在JQ，基本不用=号，我们都通过函数调用的方式完成一些操作）

​ 2.链式操作

​ 3.取值赋值一体化

普通写法

window.onload = function(){
   
}

jQuery写法

$(function(){
   
})

案例

当鼠标移入的时候变成黑色 移出时变成蓝色 点击时变成红色

<div id = 'div1'>div</div>
        <ul>
            <li>1111</li>
            <li class = 'box'>1111</li>
            <li name = 'hello'>1111</li>
            <li class = 'box'>1111</li>
            <li>1111</li>
        </ul>
        <ol>
            <li class = 'box'>2222</li>
            <li name = 'hello'>2222</li>
            <li>2222</li>
            <li class = 'box'>2222</li>
        </ol>
        <input type="text" name = 'hello'>


            $(function(){
                // alert(2);
                //给页面上所有的li节点添加点击事件
                $("li").click(function(){
                    this.style.backgroundColor = 'red';
                })

                //给他添加移入移出
                $("li").mouseover(function(){
                    this.style.backgroundColor = 'black';
                })

                $("li").mouseout(function(){
                    this.style.backgroundColor = 'blue';
                })

            });

链式操作写法

  $(function(){
            $("li").click(function(){
                this.style.backgroundColor = 'red';
            }).mouseover(function(){
                this.style.backgroundColor = 'black';
            }).mouseout(function(){
                this.style.backgroundColor = 'blue';
            }).css("backgroundColor","pink");
        })

取值赋值一体化

 $(function(){
            // alert($("#div1").css("width"));

            // $("#div1").css("width","300px");
            // $("#div1").css("width","300");

            // 同时设置多个css样式
            $("#div1").css({
                width:300,
                height:500,
                "backgroundColor":'orange'
            })
            // 取值
            alert($("#div1").html());
            //赋值
            $("#div1").html("wdnmd")

            //获取输入框的值value 
            // 取值
            alert($("input").val());
            //赋值
            $("input").val("wdnmd");
        })
jQuery和JavaScript的关系

JQuery_选择网页元素

​ 1、模拟css选择元素

​ 参考css选择器的参考手册

​ 2、独有的表达式

​ 3、支持多种筛选方式

​ JQuery的写法特点

​ 1、方法函数化 （基本上在JQ，基本不用=号，我们都通过函数调用的方式完成一些操作）

​ 2、链式操作

​ 3、取值赋值一体化

​ JQ和JS的关系

​ 【注】JQ是通过JS封装的，

​ 【注】JQ中$()调用返回的是一个JQ构造函数生成的对象。JQ对象后面只能跟JQ自己的方法。

​ 【结论】：JQ和JS可以共存，但是不能混用。

案例

 $(function(){
                var res = $("#div1");
                // alert(res); //object Object
                // res.css("backgroundColor", 'red');
                // res.style.backgroundColor = 'orange'; //JQ对象后面跟JS操作，失效

                var node = document.getElementById("div1");
                // alert(node); //object HTMLDivElement
                alert(node.html()); //JS对象后面跟JQ的操作，失效
            })
Not/Has/filter

​ filter 过滤

​ not filter的反义词

​ has 拥有

 		<div id='div1' class='box'>div1文本</div>
    <div id='div2'><span class='box'>div2文本</span></div>

 $(function(){
            // $("div").filter(".box").css("backgroundColor","red");
            // $("div").not(".box").css("backgroundColor","blue");
            $("div").has(".box").css("backgroundColor",'red');
        })
Next/Prev/Find

​ prev 找到当前节点兄弟节点中的上一个节点

​ next 找到当前节点兄弟节点中的下一个节点

​ find() 查找子节点

 		<div id = 'div1' class = 'box'>div1文本</div>
    <div id = 'div2'><span class = 'box'>div2文本</span></div>
    <div id = 'div3'>div3文本</div>

 $(function(){
            $("#div2").prev().css("backgroundColor","red");
            $("#div2").next().css("backgroundColor",'blue');

            //查找div节点中，class=box的子节点
            $("div").find(".box").css("backgroundColor",'green');
        })
eq/Index

​ eq(下标) 通过下标获取想要的元素

​ index() 返回当前这个节点，在【兄弟节点】中的下标

<div id='div2'><span class='box'>div2文本</span></div>
    <div id='div3'>div3文本</div>
    <div id='div1' class='box'>div1文本</div>
    <div>

        <div id='div4' class='box'>div1文本</div>
    </div>

$(function(){
            $("div").eq(1).css("backgroundColor","red");
            $("div:eq(2)").css("backgroundColor","orange");

            alert($("#div1").index());
            
        })
attr / Css

​ 设置的时候，是对选中的所有元素节点进行设置

​ 获取的时候，只获取第一个符合条件的节点。

 		<div title='hello' name='world' class='box1'>div1文本</div>
    <div title='hello' name='world' class='box2'>div2文本</div>
    <div title='hello' name='world' class='box3'>div3文本</div>
    <div title='hello' name='world' class='box4'>div4文本</div>
    <div title='hello' name='world' class='box5'>div5文本</div>

$(function () {
            //修改css样式
            // $("div").css("height", "200px");
            //修改多个样式
            // $("div").css({
            //     width: 100,
            //     height: 300,
            //     backgroundColor: "pink"
            // })

            //获取css样式
            // alert($("div").css("height")); //100px

            //行间属性进行处理  attr
            alert($("div").attr("class")); //box1

            // $("div").attr("title", "xxx");
            //设置多个行间样式
            $("div").attr({
                title: "xxx",
                name: 'yyy',
                class: 'box'
            })
        })
addClass / removeClass

​ addClass 新增class

​ removeClass 删除class

<div id = 'div1' class = 'box1 box2'>sss</div>

 $(function(){
            $('#div1').addClass("box3 box4 box2");
            $("#div1").removeClass("box3 box4");
        })
Width / Height相关的方法

获取宽的方法

​ width()

​ innerWidth()

​ outerWidth();

​ outerWidth(true);

​ 获取高的方法

​ height();

​ innerHeight();

​ outerHeight();

​ outerHeight(true)

 	  <div id='div1'></div>
    <button>获取css样式</button>

 $(function () {
            $("button").click(function () {

                //普通获取css样式
                // alert($("#div1").css("width")); //100px


                //width
                alert("width: " + $("#div1").width());

                //width + padding
                alert("innerWidth: " + $("#div1").innerWidth());

                //width + border + padding
                alert("outerWidth: " + $("#div1").outerWidth());

                //width + border + padding + margin
                alert("outerWidth: " + $("#div1").outerWidth(true));


            })
        })
节点操作

节点操作：

​ • insertBefore() before()

​ • insertAfter() after()

​ • appendTo() append()

​ • prependTo() prepend()

​ • remove()

 				<div>div文本<em>em文本</em><strong>strong文本</strong></div>
        <span>span文本</span>

 $(function(){
                //找到span节点，插入到div节点的前面
                // $("span").insertBefore($("div")).css("backgroundColor", 'red');
                //div前面是span
                $("div").before($("span")).css("backgroundColor", 'blue');


                //找到div节点，插入span节点的后面
                // $("div").insertAfter($("span"));

                //找到span节点，插入到div节点的子节点末尾
                // $("span").appendTo($("div"));

                //找到span节点，插入div节点的子节点的首位
                // $("span").prependTo($("div"));

                //找到节点，删除这个节点
                // $("div").remove();
            })
On / Off

​ on 绑定事件

​ off 取消事件绑定

​ 【注】在JQ所有的事件绑定的方法，底层都是通过事件监听器封装。

<button>取消事件绑定</button>
        <div></div>
        <div></div>
        <div></div>
        <ul>
            <li>111</li>
            <li class = 'box'>111</li>
            <li class = 'box'>111</li>
            <li>111</li>
            <li>111</li>
        </ul>

 $(function(){
                //原来div添加点击
                /*
                $("div").click(function(){
                    alert("点击1");
                })
                $("div").click(function(){
                    alert("点击2");
                })
                */

                //1、给单个事件，添加事件绑定
                // $("div").on("click", function(){
                //     alert("单击1");
                // })

                //2、给多个事件，添加同一个事件绑定函数
                // var i = 0;
                // $("div").on("click mouseover", function(){
                //     $(this).html(i++);
                // })


                function show(){
                    alert("hello world");
                }
                $("div").click(show);

                //3、给不同的事件，添加不同的函数
                $("div").on({
                    click: function(){
                        alert("单击");
                    },
                    mouseover: function(){
                        $(this).css("backgroundColor", 'red');
                    },
                    mouseout: function(){
                        $(this).css("backgroundColor", 'blue');
                    }
                })


                //4、添加事件委托  第二参数，触发对象的选择
                /*
                $("ul").on("click", "li.box", function(){
                    //this指向就是当前的触发对象
                    $(this).css("backgroundColor", 'red');
                })
                */

                $("button").click(function(){
                    //取消事件绑定
                    //1、取消所有事件
                    // $("div").off();

                    //2、取消某一个事件类型上的函数
                    // $("div").off("click");

                    //3、取消某一个事件类型上的某一个函数(一定要有函数名)
                    $("div").off("click", show);
                })
            })
scrollTop

获取当前页面的滚动高度

<body style = 'height: 3000px'>
        
    </body>

 $(function(){
                $(document).click(function(){
                    alert($(window).scrollTop());
                })
            })

案例

实现一个可关闭的弹窗，并且根据窗口自适应居中（随窗口变动而变化位置，始终居中）

<body style='height: 3000px'>
    <button id='btn1'>显示弹窗</button>
    <div id='msg'>
        <input type="text" placeholder="用户名">
        <br>
        <input type="text" placeholder="密码">
        <div id='close'>X</div>
    </div>
</body>


 * {
            margin: 0px;
            padding: 0px;
        }

        #msg {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: absolute;
            display: none;
        }

        #close {
            position: absolute;
            right: 0px;
            top: 0px;
        }

 $(function () {
            $("#btn1").click(function () {
                var l = ($(window).outerWidth() - $("#msg").outerWidth()) / 2;
                var t = ($(window).outerHeight() - $("#msg").outerHeight()) / 2 + $(window).scrollTop();

                $("#msg").css({
                    display: "block",
                    left: l,
                    top: t
                });
            })


            $(window).on("resize scroll", function () {
                var l = ($(window).outerWidth() - $("#msg").outerWidth()) / 2;
                var t = ($(window).outerHeight() - $("#msg").outerHeight()) / 2;
                $("#msg").css({
                    left: l,
                    top: t
                })
            })
            $("#close").click(function () {
                $("#msg").css("display", 'none');
            })
        })
Event

ev JQ兼容后的事件对象

​ 获取鼠标坐标

​ ev.pageX ev.pageY 原点：整个文档的左上角，包含滚动高度的

​ ev.clientX ev.clientY 原点：可视窗口的左上角为原点

​ ev.screenX ev.screenY 原点：电脑屏幕的左上角

​ ev.which

​ 1、如果是在鼠标事件下 代表button

  1. 左键
  2. 滚轮
  3. 右键

​
​ 2、如果keydown 代表是键码（不区分大小写）

​ 3、如果keypress 代表字符码（区分大小写）

​ e.target JQ兼容后的触发对象

案例

 				<h1>hello world</h1>
        <h1>hello world</h1>

$(function(){
                $(document).mousedown(function(ev){
                    // alert(ev.clientX + ", " + ev.clientY);
                    // alert(ev.pageX + ", " + ev.pageY);

                    // alert(ev.which);

                    alert(ev.target.nodeName)
                })

                // $(window).keydown(function(ev){
                //     alert(ev.which);
                // })

                // $(window).keypress(function(ev){
                //     alert(ev.which);
                // })
            })
阻止冒泡和默认行为

​ preventDefault 阻止默认行为

​ stopPropagation 阻止事件冒泡

				<div id = 'div1'>
            <div id = 'div2'>
                <div id = 'div3'>
                    <a href="https://www.baidu.com">百度</a>
                </div>
            </div>
        </div>

 $(function(){
                $("div").click(function(ev){
                    alert(this.id);
                    // ev.stopPropagation();
                    return false; 
                })

                //阻止a标签的默认行为
                // $("a").click(function(ev){
                //     ev.preventDefault();
                //     ev.stopPropagation();
                // })


                $("a").click(function(ev){
                    return false; //既可以阻止默认行为，又可以阻止事件冒泡。
                })
            })
Offset / Position / OffsetParent
   offset  直接距离最左边和最上边的坐标

​ offset().left

​ offset().top

​ position 什么都算，计算距离第一个有定位的父节点的距离

​ position().left

​ position().top

​ offsetParent()

​ 找第一个有定位的父节点，如果没有会往上层去找，直到找到html节点为止。

				<div id = 'div1'>
            <div id = 'div2'></div>
        </div>

 $(function(){
            $(document).click(function(){
                alert($("#div2").offset().left)
                alert($("#div2").offset().top);
                alert($("#div2").position().left);
            })
        })

$(function(){
                $(document).click(function(){
                    // $("#div2").parent().css("backgroundColor", 'black');  //找到父节点
                    // $("#div2").parents("div").css("backgroundColor", 'black'); //找到所有祖先节点

                    $("#div2").offsetParent().css("backgroundColor", 'black');
                })
            })
Each / Size / Val
	val 表单元素的value值

​ size() JQ，获取选择器获取到的元素节点的个数

​ each 只能被JQ对象调用，进行对于我们获取到的元素遍历

				<ul>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
            <li>111</li>
        </ul>
        <input type="text" value = '123'>
        <input type="text" value = '456'>
        <input type="text" value = '789'>

$(function(){
                // alert($("input").val());
                // $("input").val("hello world");


                // alert($("ul li").size());

                $("ul li").each(function(index, item){
                    //item JS对象   index 当前遍历到的元素的下标
                    // item.innerHTML = index;
                    $(item).html(index);
                })
            })

                                                                           逆战班

如果对想对jQuery，以及更多关于前端知识，有更多了解的话

请移步码农雨飞b站入口

UP主QQ：1685303031（欢迎加入Javascript学习，领取代码笔记相关资料） ，互联网开源精神希望大家可以传承！ 意在帮助更多想要学习和入门IT行业的小伙伴，给你提供可靠优质的学习资料和方式。在这里插入图片描述
Lz_zzz
关注
jQuery选择器
m0_57774967的博客
06-16 4747
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
JQuery的引用
zwjl1017的博客
04-01 4109
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3519
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4307
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3768
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5130
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5465
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5630
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3340
jQuery的两种引入方式
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页
最新发布
11-03
关于组织参加“第八届‘泰迪杯’数据挖掘挑战赛”的通知-4页
PyMySQL-1.1.0rc1.tar.gz
11-03
PyMySQL-1.1.0rc1.tar.gz
技术资料分享CC2530中文数据手册完全版非常好的技术资料.zip
11-03
技术资料分享CC2530中文数据手册完全版非常好的技术资料.zip
docker构建php开发环境
11-03
docker构建php开发环境
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值