初识 jQuery
什么是 jQuery?
jQuery 就是 JavaScript 和 Query, 是辅助 JavaScript 开发的库, 应用广泛, 形成了行业标准. 它对 DOM 操作做了很好的封装, 我们可以用 jQuery 非常方便地来代替 DOM 操作.
为什么要使用 jQuery?
轻量级, 最新版本的大小只有 85KB; 功能强大的选择器; 出色的 DOM 封装; 兼容性好(可以在不同浏览器使用); 可靠的事件处理机制; 完善的 Ajax 支持; 丰富的插件支持.
jQuery 的理念是: 写得少, 做得多(write less,do more).
如何使用 jQuery?
官网去 jQuery 官网下载最新的 jQuery, 放在项目文件夹内, 在 html 文件中 JS 代码上方加入 <script src="jquery-3.3.1.js"></script> 即可.
jQuery 对象与 DOM 对象的相互转化
1. jQuery 对象转化成 DOM 对象
$(DOM 对象) = jQuery 对象
2.DOM 对象转化成 jQuery 对象
jQuery 对象[0] = DOM 对象
jQuery 对象. get(0) = DOM 对象
jQuery 大全: http://jquery.cuishifeng.cn/
查找元素
常用选择器
1. 根据 id 找标签
$("#id")
2. 根据 class 使用样式找标签
- <div class="c1"></div>
- $(".c1")
3. 根据标签类型寻找
$("a") // 找到所有 a 标签
4. 组合查找
- (用逗号隔开)
- <div id='i10' class='c1'>
- <a>f</a>
- <a>f</a>
- </div>
- <div class='c1'>
- <a>f</a>
- </div>
- <div class='c1'>
- <div class='c2'> </div>
- </div>
$("a,.c2,#i10") 相当于 $("a") + $(".c2") + $("#i10")
5. 层级选择
(用空格隔开)
$("#i10 a") 将 id=i10 的标签下所有后代 a 标签找出来
$("#i10>a") 只找子标签, 不找孙标签
$("#i10+a") 找到 #i10 后面的所有 a 标签(兄弟 + 兄弟的后代, 不包括自己的后代)
$("#i10~a") 找到所有与 #i10 同层的 a 兄弟标签
6. 基本选择器
:first 在选择出来的若干个标签中选择第一个
:last 最后一个
:even 奇数
:odd 偶数
:eq() 括号里写索引值, 从 0 开始
:gt() 索引大于
:lt() 索引小于
7. 根据属性查找
自定义了 bob 属性时,
$("[bob]") 找出所有具有 bob 属性的标签
$("[bob='123']") 找出 bob 属性为 123 的标签
8. 表单
- $("input[type='text']")
- $(":text")
两者完全等价, 后者是一个简写
筛选器
在选择器的基础上再次筛选.
$(this).next() 下一个
nextAll() 后面的所有标签
nextUntil("") 向后直到某标签
$(this).prev() 上一个
prevAll() 前面所有的标签
prevUntil("") 向前直到某标签
$(this).parent() 父标签
$(this).children() 所有子标签 (在 children 的括号内也可以进一步筛选) 如: children("[a='123']")
$(this).siblings() 所有兄弟标签(不包括自己)
first() 第一个
last() 最后一个
find("") 找到具有某样式的标签
hasClass("") 判断是否具有某样式
.eq("")与选择器 eq 功能相同, 只是写法不同
示例:
- $('#tb:checkbox').each(function(k){ // .each() 是 jQuery 使用的循环
- // k 当前索引
- // this 代指当前循环的每一个元素, 为 DOM 对象
- var v = $(this).prop("checked") ? false : true;
- $(this).prop("checked",v);
- })
jQuery 方法内置循环: $('#tb:checkbox'). 操作
操作元素
jQuery 支持链式编程, 可以将很多操作写入一行
1. 绑定事件
jQuery 的绑定事件操作与 DOM 非常相似
$("input[type='123']").click(函数名或匿名函数); jQuery
document.getElementById("").onclick = 函数名或匿名函数; DOM
2. 样式操作
.addClass("样式"); 增加某样式(力度大)
.removeClass("样式"); 删除某样式
.hasClass("样式"); 判断是否具有某样式, 返回 true 或 false
.toggleClass("样式") 多次执行时, 交错地删除或添加某样式
.CSS("color"); 获取 color 样式的值
.css("display","none") 设置样式(力度小)
3. 文本操作
// 在 DOM 中, 能够以 innerText 获取文本的操作在 jQuery 中都用 text()方法
.text() 获取文本内容
.text("内容") 设置文本内容
.html() 获取标签内容
.html("<a > 内容</a>") 或 .html("内容") 设置文本内容, 效果与上面相同
// 部分标签, 如 < input>,<select>,<textarea > 标签 等原本是 value 的在这里都是 val()
.val() 获取文本
.val("内容") 设置文本
4. 属性操作
// 可以用做自定义属性
.attr("value") 获取属性的值(传入属性名)
.attr("value","1") 设置值(传两个参数), 可以新增, 修改属性
.removeAttr("") 删除属性
- // 专门用于 checkbox,radio 获取, 设置值
- .prop("checked",true)
如果要判断标签是否具有某属性, 不能直接判断其属性值是否等于 undefined,[ if(obj.attr("value") == "undefined" ) ] . 因为 undefined 是属于 undefined 类型, 而非字符串. 正确的方法是:
if( typeof(对象. attr("属性")) == "undefined" )
5. 索引
.index() 获取此标签在父标签下的索引, 常与 eq 一起用
6. 标签操作(创建插入删除)
.append("<a>123</a>") 在内部创建标签, 添加到末尾
.prepend("<a>123</a>") 添加到内部最前面
.after("") 创建兄弟标签, 紧随其后
.before("") 创建兄弟标签, 紧随其前
.remove() 删除标签
.empty() 仅删除内容, 不删除标签
.clone() 克隆一份 // 如果只克隆标签而不安排位置, 标签不会显示出来
7. 位置操作
.scrollTop() 获取 / 调整当前浏览的上下位置
.scrollLeft() 获取 / 调整当前浏览的水平位置
window 是 DOM 对象, 表示整个浏览页面窗口
$(window).scrollTop() 获取当前浏览相对于整个窗口的位置
$(window).scrollTop(0) 返回顶部
.offset() 获取指定标签在 html 中的坐标
.offset().top 距离顶部的坐标
.offset().left 距离左边的坐标
.position() 获取指定标签相对于父标签的坐标(相当于在父标签中 relative, 子标签中 absolute)
.height() 获取标签的纯高度
.innerHeight() 纯高度 + 内边距
.outerHeight() 纯高度 + 内边距 + 边框
.outerHeight(true) 纯高度 + 内边距 + 外边距 + 边框
8. 表单提交
a 标签, submit 按钮, 本身具有提交 / 跳转功能, 内置了点击事件. 如果我们给此类标签再写一个点击事件, 则会优先执行自己写的事件, 然后再执行提交提交 / 跳转功能. 如果想要屏蔽原有的功能, 根据点击方式的不同, 方法也不同.
// 在 html 中写 Onclick 事件绑定函数.
html:<a onclick="A();" href="http://www.baidu.com">点击啊</a>
JS: function A(){alert('123');return false;};
- // 在 js 代码中绑定点击事件函数
- $("a").click(function(){
- alert('123');
- return false;
- });
两种方式效果相同, 且针对 a 标签 和 submit 都一样.
9. 其他操作和方法
标签的隐藏和显示
hide()和 show() 在设置速度的情况下, 从隐藏到完全可见的过程中会逐渐地改变高度, 宽度, 内外边距和透明度
fadeOut()和 fadeIn() 控制透明度直至完全消失 / 显示
sildeUp()和 sildeDown() 上升消失 / 下降显示
以上三对方法都可以直接作用于 jQuery 对象, 实现的本质是改变 display 样式, 不同之处在于隐藏 / 显示的过程中呈现的视觉效果不同.
hide/show(speed,callback) 参数: speed 表示变化时间:"fast","normal","slow" 或直接写时间(毫秒)
callback 表示回调函数
调用方法时可以不传入参数, 也可以传入两个, 但如果传入一个只能是 speed.
事件处理
jQuery 事件处理主要有四种方法: bind(),delegate(),live(),on(). 解除绑定事件分别对应 unbind(),undelegate(),die(),off()
bind()支持所有 jQuery 版本, live()支持 jQuery1.9-,delegate()支持 1.4.2+,on()支持 jQuery1.7+. 由于 1.9 往后的版本不再支持 live(), 这里不再讲此方法.
bind()和其中的 click()方法只能对原本有的标签绑定事件, 而不能对动态添加的标签绑定. on(),delegate(),liev()都可以.
bind(),live()或. delegate(), 查看源码就会发现, 它们实际上调用的都是. on()方法, 现在官方推荐 on 方法, 所以大家以后尽量习惯 on 方法.
页面 1:
- <input id="t1" type="text" />
- <input id="a1" type="button" value="添加" />
- <ul id="u1">
- <li id="s1">1</li>
- <li>2</li>
- </ul>
- <script src="jquery-3.3.1.js"></script>
- <script>
- $('#a1').click(function () {
- var v = $('#t1').val();
- var temp = "<li>" + v + "</li>";
- $('#u1').append(temp);
- });
- </script>
页面 2:
- <input id="btn1" type="button" value="点击 1" />
- <input id="btn2" type="button" value="点击 2" />
- <a id="a1" href="#">CodePlayer</a>
一, bind() 和 unbind()
.bind("type", {data}, function)
参数: type: 必需. 绑定事件的类型. 可以绑定多个, 用空格隔开.
data: 可选. 传入参数, 字典的形式.
function: 必需. 执行函数
我们常用的. click() .mouse()等方法, 是 bind()的简写.
.unbind("type", function) 删除由 bind()方法添加的绑定事件
参数: type: 可选. 取消绑定的类型, 可以是多个.
function: 可选. 取消绑定的函数
当没有参数时, 删除此标签所有由 bind()绑定的事件程序.
页面 1 示例:
- $("ul").bind("click",function(){
- var v = $(this).text();
- alert(v);
- });
二, delegate() 和 undelegate()
$("#s1").delegate("selector", "type", {data}, function)
参数: selector: 必需. 是一个选择器, 可选择被点击元素的一个或多个子元素. 在这里, 并不是为 s1 绑定事件, 而是为筛选后的 selector 绑定.
type: 必需. 绑定事件的类型. 可以绑定多个, 用空格隔开.
data: 可选. 传入参数, 字典的形式.
function: 必需. 执行函数.
.undelegate("selector", "event", function) 删除由 delegate()方法绑定的事件
参数: selector: 可选. 同上.
event: 可选. 事件, 一个或多个
function: 可选. 解除指定的函数
如果没有参数, 删除此标签所有由 delegate()绑定的事件程序.
在解除事件函数绑定时, 如果使用选择器, 必需和绑定时的选择器相同, 否则会解除失败.
页面 1 示例:
- $('ul').delegate('li','click',A);
- function A() {
- var v = $(this).text();
- alert(v);
- }
- $('ul').undelegate("li","click",A); // 解除绑定
- $('ul').children().eq(0).undelegate(); // 解除绑定失败
- $('ul').undelegate("#s1","click",A); // 解除绑定失败
- // $('ul').delegate('#s1','click',function () {
- // var v = $(this).text();
- // alert(v);
- // });
三, on() 和 off()
第一种语法结构:
.on("type", "selector", {data}, function)
参数: type: 必需. 同上
selector: 可选. 同上.
data: 传入参数. 同上.
function: 执行函数. 同上.
.off("type", "selector", function)
参数: type: 必需. 同上.
selector: 可选. 同上.
function: 可选. 指定取消绑定的函数.
如果没有参数, 删除此标签所有由 on()绑定的事件程序.
在解除事件函数绑定时, 如果使用选择器, 必需和绑定时的选择器相同, 否则会解除失败.
第二种语法结构:
.on( {object:function(e){ ... }},"selector",{data} )
参数: object: 必需. 事件对象.
function: 必需. 执行函数.
selector: 可选. 选择器.
e: 可选. 形参
data: 可选.
页面 1 示例:
- // 第一种语法结构
- $('ul').on('click','li',function () {
- var v = $(this).text();
- alert(v);
- });
- // 第二种语法结构
- $("ul").on({
- mouseenter: function() {
- $(this).css("color","red");
- },
- mouseleave: function() {
- $(this).css("color","black");
- },
- click: function(e) {
- alert(e.data.a);
- }
- }, "li",{a:"你好"});
页面 2 示例:
- <script>
- function btnClick1(){
- alert( this.value + "-1" );
- }
- function btnClick2(){
- alert( this.value + "-2" );
- }
- var $body = $("body");
- // 给按钮 1 绑定点击
- $body.on("click", "#btn1", btnClick1 );
- // 给按钮 2 绑定点击
- $body.on("click", "#btn2", btnClick2 );
- // 移除 body 元素为所有 button 元素的 click 事件绑定的事件处理函数 btnClick2
- // 点击按钮, btnClick1 照样执行
- $body.off("click", ":button", btnClick2); // 发现并不起作用
- // 点击按钮 1, 不会执行任何事件处理函数
- // $body.off("click", "#btn1");
- // 注意: $body.off("click", ":button"); 无法移除 btn1 的点击事件, off()函数指定的选择器必须与 on()函数传入的选择器一致.
- </script>
四, one()
如果想要绑定一个事件, 只想让它运行一次, 不用使用解绑函数, 用 one()一步到位.
.one(event,data,function)
参数: event: 必需. 事件
data: 可选. 参数
function: 必需. 执行函数.
如何在事件发生时往执行函数内传参呢?
利用事件绑定函数中参数 data 传入. 以 on 为例.
- .on("click",{a:"3",b:"4"},func2); // 传入参数以字典形式
- function func2(c){
- console.log(c.data["a"]);
- console.log(c.data["b"]);
- console.log(c.data.a);
- console.log(c.data.b);
- }
jquery 扩展
1. 如何理解 $(function(){ ... }) ?
它等效于 $(document).ready(function(){}).
一般地写好的 JavaScript 代码, 在 html 代码渲染完成后(完全加载完毕), 才执行 js 代码, 包括绑定的事件. 如果有较大的图片片, 视频等, 会导致 js 代码迟迟不能执行, 影响用户体验.
如果在 JavaScript 代码块内包一层 $(function(){ ... }) , 将所有代码写在这里面, 可以解决这一问题. 它的意思是, 当 DOM 页面文档框架布局加载完毕后, 自动执行里面的代码.
2.jQuery 扩展
扩展指的是将扩展内容写到别的文件(.js), 在主文件中导入即可直接使用.
- // 类方法
- $.extend({
- "nihao":function(){
- return "sb";
- }
- });
调用:
- $.nihao();
- //alert($.nihao());
- // 对象方法
- $.fn.extend({
- "hello":function(){
- return "db";
- }
- });
调用:
- $("选择器").hello();
- //alert(v2);
当引入多个 js 文件时, 可能会出现以下问题:
出现相同的扩展名
出现相同的全局变量
解决办法: 一个文件嵌套一个自执行函数, 将内部的全局变量变成局部变量.
(function(){ ... })();