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

文章目录

jQuery
- jQuery介绍
- jQuery能做什么
- jQuery的优势
- jQuery的基础语法
- jQuery对象和DOM对象的转换
- 选择器
- - 元素选择器
  - 层次选择器
  - 属性选择器
  - 过滤选择器
- jQuery事件
- - 鼠标事件
  - 键盘事件
  - 表单事件
  - 鼠标悬停复合事件
  - 绑定事件的另一种写法（动态绑定）
- jQuery效果
- - 隐藏显示
  - 淡入淡出效果
  - 滑动效果
  - 动画效果
  - callback
- jQuery的DOM操作
- - 获取和设置值的操作
  - 节点的操作
  - 类样式的操作
- 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的其余所有livar x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ulalert(x);});</script>

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

day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
jQuery（一）:概述、选择器、操作（元素本身、属性、内容、样式）、元素遍历、事件
目录一.jQuery概述 1.1 什么是jQuery 1.2 jQuery的优势 1.3 jQuery版本支持 1.4 jQuery引入 1.5 jQuery核心用法 1.5.1 $介绍 1.5.2 ...
视频教程-jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定-jQuery
jQuery交互式前端开发(第一季):初体验/选择器/事件绑定知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老兵 ¥12. ...
jQuery的简单了解和学习（1） jquery简介+语法+选择器+事件
jQuery jQuery简介 jQuery是一个Javascript函数库,可以让程序员写得少,而实现得多,主要包含以下功能:HTML元素的选取.操作:CSS操作:HTML事件函数:JavaScri ...
jQuery随笔20190711~0713(选择器、事件、效果)
目录 1.jQuery简介 2.下载jQuery 3.jQuery选择器 4.jQuery事件 5.jQuery效果 1)隐藏和显示 2)淡入淡出 3)滑动 4)动画 5)停止动画 6)jQuer ...
70天的JQUERY学习：选择器+事件+效果。总结篇
运行结果这是我等下要发的代码.首先去了解Jquery的Apl:APL代码. <!DOCTYPE html> <html class="no-js loading-pr ...
jQuery复选框选中状态更改事件
本文翻译自:jQuery checkbox checked state changed event I want an event to fire client side when a checkbo ...
jQuery学习笔记（简介，选择器）
jQuery优势 1. 强大的选择器.jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器. 2. 出色的DOM操作封装 3. 可靠的事件处理机制 ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jQuery框架学习第五天：事件与事件对象
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

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

文章目录

jQuery

jQuery介绍

jQuery能做什么

jQuery的优势

jQuery的基础语法

jQuery对象和DOM对象的转换

选择器

元素选择器

层次选择器

属性选择器

过滤选择器

jQuery事件

鼠标事件

键盘事件

表单事件

鼠标悬停复合事件

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

jQuery效果

隐藏显示

淡入淡出效果

滑动效果

动画效果

callback

jQuery的DOM操作

获取和设置值的操作

节点的操作

类样式的操作

jQuery遍历

祖先元素遍历

后代元素遍历

同辈元素遍历

过滤遍历元素

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

最新文章

热门文章