转自 https://www.cnblogs.com/liwenzhou/p/8178806.html
为什么要用jQuery
做同样的事,jQuery写起来极其简练
jQuery相当于JavaScript的第三方模块(原生的DOM是基础)jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择（DOM）元素、创建效果、处理、以及开发程序
学习内容
0,查找标签/属性
1,改变标签 2,改变标签中的属性 3,改变标签的样式 4,事件相关 5,动画效果 6,其他方法导入jQuery
推荐在body的最下面导入
jQuery对象和DOM对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是 jQuery独有的。 如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。约定
我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像var variable = DOM对象$variable[0] //jQuery对象转成DOM对象
例子
$("#i1").html(); //jQuery对象可以使用jQuery的方法$("#i1")[0].innerHTML; // DOM对象使用DOM的方法 互转
jQuery对象 --> DOM对象 jQuery对象[0] 用索引取出具体的标签,则变成DOM对象DOM对象 --> jQuery对象 $(DOM对象) 用$包住DOM对象,则变成jQuery对象
查找
可以查找到的
标签
标签的属性 表单对象属性基本选择器
标签选择器 $("tagName")id选择器 $("#id")class选择器 $(".className")配合使用 $("div.c1") // 找到有c1(class类)的div标签通用选择器 $("*")组合选择器 $("#id, .className, tagName") // 符合其一,即可找出来 层级选择器
x和y可以为任意选择器
$("x y"); // x的所有后代y（子子孙孙）$("x > y"); // x的所有儿子y（儿子）$("x + y"); // 找到所有紧挨在x后面的y$("x ~ y"); // x之后所有的兄弟y 属性选择器
[attribute][attribute=value] // 属性等于[attribute!=value] // 属性不等于
例子
$("input[type='checkbox']"); // 取到checkbox类型的input标签$("input[type!='text']"); // 取到类型不是text的input标签 基本筛选器
:first // 第一个:last // 最后一个:eq(index) // 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素，从 0 开始计数:odd // 匹配所有索引值为奇数的元素，从 0 开始计数:gt(index) // 匹配所有大于给定索引值的元素:lt(index) // 匹配所有小于给定索引值的元素:not(元素选择器) // 移除所有满足not条件的标签:has(元素选择器) // 选取所有包含(一个或多个)标签在其内的标签(指的是从后代元素找)
例子
$("div:first") // 找到所有的div,只留下第一个$("div:has(h1)") // 找到所有后代中有h1标签的div标签$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签$("li:not(.c1)") // 找到所有不包含c1样式类的li标签$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签 表单筛选器
表单属性
其实也可以通过属性选择器找到,但是通过表单筛选器更高效
:text 普通输入框:password 密码输入框:file 文件输入框:radio 单选框:checkbox 多选框:submit 提交按钮:reset 刷新按钮:button 普通按钮
例子
$(":checkbox") // 找到所有的checkbox$("#id3 input:checkbox") // 找到【id3的内部】的所有checkbox 表单对象属性
:enabled 可用:disabled 不可用:checked 被选中的checkbox:selected 被选中的下拉菜单
例子
$("input:enabled") // 找到可用的input标签$(":selected") // 找到所有被选中的option jQuery对象的筛选方法
可以通过这些方法达到筛选的效果
.next() // 下一个.nextAll() // 下一个所有.nextUntil("#i2") // 下面,直到往后找到#i2为止 (不包含#i2).prev() // 前一个.prevAll() // 前一个所有.prevUntil("#i2") // 前面,直到往后找到#i2为止 (不包含#i2).parent() // 父标签.parents() // 查找当前元素的所有的父辈元素.parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。.children(); // 儿子们.siblings(); // 兄弟们.find("p"); // 从【结果集】中搜索所有与指定表达式匹配的元素。.filter(".c1") // 从【结果集】中过滤出有c1样式类的.first() // 获取【结果集】的第一个元素.last() // 获取【结果集】的最后一个元素.not() // 从【结果集】中删除与指定表达式匹配的元素.has() // 从【结果集】中保留包含特定后代的元素，去掉那些不含有指定后代的元素。.eq() // 索引值等于指定值的元素 例子
$("#id1").next() // 找到id为id1的下一个元素 操作
文档操作
$(A).append(B) // 把B追加到A内部的最后$(A).appendTo(B) // 把A追加到B内部的最后$(A).prepend(B) // 把B前置到A内部的最前$(A).prependTo(B) // 把A前置到B内部的最前$(A).after(B) // 把B放到A的后面$(A).insertAfter(B) // 把A放到B的后面$(A).before(B) // 把B放到A的前面$(A).insertBefore(B) // 把A放到B的前面.remove() // 删除整个标签.empty() // 清空标签的内部$(A).replaceWith(B) // B替换所有A$(A).replaceAll(B) // A替换所有B.clone() // 克隆
append/prepend/after/before的B可以直接写文本, 例如:$("#id1").append("<p>段落1</p>") // 在id为id1的内部添加文本
示例
$("#id2").append(divEle) // 在id为id2的内部的最后添加divEle$(pEle).appendTo($("#id2")) // 把pEle添加到#id2的内部的最后$("#id1").clone().insertAfter($("#id1")) // 克隆一个id为id1的标签并把它插入到它本身的后面$("div").replaceWith(" new world ") // new world 替换掉div$("#id1").append("段落1
") // 在id为id1的内部添加文本$("div").append("hello") // 在所有div的内部添加hello文本 样式操作
class操作
.addClass(); // 添加指定的CSS类名。.removeClass(); // 移除指定的CSS类名。.hasClass(); // 判断样式存不存在.toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
示例
$("#id1").addClass("c2") // 找到id为id1的元素,添加样式c2 .css操作
.css("color","red") // 【修改】单个样式属性.css({ "color":"red","font-size":"24px"}) // 【修改】多个样式属性 示例
$("p").css("color", "red"); //将所有p标签的字体设置为红色 属性操作
自定义属性
用于id等或自定义属性
.attr(attrName) // 【查找】返回第一个匹配元素的属性值.attr(attrName, attrValue) // 【设置】为所有匹配元素设置一个属性值.attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值.removeAttr() // 【删除】从每一个匹配的元素中删除一个属性 例子
$("#id3").attr("class") // 返回id为id3的class的属性值 判断属性值
用于checkbox和radio
.prop() // 获取属性 --> 返回布尔值.removeProp() // 移除属性
prop和attr的区别
attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性;
可以认为attr是显式的，而prop是隐式的例子
// 针对上面的代码，$("#i1").attr("checked") // undefined$("#i1").prop("checked") // false 位置操作
.offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置.position() // 获取匹配元素相对父元素的偏移.scrollTop() // 获取匹配元素相对滚动条顶部的偏移.scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。示例
$("div").offset() // 获取第一个div的相对偏移$("#id1").offset({top: 20, left: 20}) // 【建议】通过找id再设置相对偏移$("div").offset({top: 20, left: 20}) // 这样会设置【所有】找到的div的相对偏移 尺寸操作
.height() 内容 高.width() 内容 宽.innerHeight() 内容 高 + padding.innerWidth() 内容 宽 + padding.outerHeight() 内容 高 + padding + border.outerWidth() 内容 宽 + padding + border
示例
$("div").height() //【获取】第一个div的高$("#id1").height(50) // 【设置】id为id1的高 文本操作
.html() // 【获取】第一个匹配元素的html内容.html(val) // 【设置】所有匹配元素的html内容 --> 要设置的内容写在()内.text() // 【查找】取得所有匹配元素的内容.text(val) // 【设置】设置所有匹配元素的内容 --> 要设置的内容写在()内.val() // 【查找】取得第一个匹配元素的当前值.val(val) // 【设置】设置所有匹配元素的值.val([val1, val2]) // 设置【多选】的checkbox 或者【多选】select的值
例子
$("[name='hobby']").val(['basketball', 'football']);$("#s1").val(["1", "2"])$("input[name='gender']:checked").val() // 获取被选中的checkbox或radio的值 事件
常用事件
click(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})change(function(){...})keyup(function(){...}) 绑定事件
jQuery对象.on( 事件 [selector ],function(){}) events： 事件
selector: 选择器（可选的） function: 事件处理函数阻止后续事件执行
return false;
事件委托
适用于给未来的元素绑定事件(页面生成的时候还没有的标签);
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件.$("table").on("click", ".delete", function () { // 删除按钮绑定的事件(包括未来的删除按钮) }) 页面载入
等待DOM数加载完成
两种写法
$(document).ready(function(){// 在这里写你的JS代码...}) 简写
$(function(){// 你在这里写你的代码}) 动画效果
// 基本.show([s,[e],[fn]]).hide([s,[e],[fn]]).toggle([s],[e],[fn])// 滑动.slideDown([s],[e],[fn]).slideUp([s,[e],[fn]]).slideToggle([s],[e],[fn])// 淡入淡出.fadeIn([s],[e],[fn]).fadeOut([s],[e],[fn]).fadeTo([[s],o,[e],[fn]]).fadeToggle([s,[e],[fn]])// 自定义（了解即可）.animate(p,[s],[e],[fn])
补充
each方法
相比for循环更简单
第一种方式
$divEle.each(function(){}) 第二种方式
$.each(DOM对象,function(){}) 例子
li =[10,20,30,40]$.each(li,function(i, v){ console.log(i, v); //index是索引，ele是每次循环的具体元素。}) 后续的each循环不进行
return false;
退出当前这一次循环
return;
data方法
.data(key, value) // 给【结果集】中的所有标签存储相关的数据(或jQuery对象).data(key) // 返回【结果集】中第一个标签的key.removeData(key) // 移除存放在元素上的数据，不加key参数表示移除所有保存的数据
例子
$("div").data("k",100); // 给所有div标签都保存一个名为k，值为100$("div").data("k"); // 返回第一个div标签中保存的"k"的值$("div").removeData("k"); // 移除元素上存放k对应的数据 插件(了解即可)
给【jQuery对象】扩展一个自定义方法
$.fn.extend({ "方法名":function(){...}}) 给【jQuery】扩展自定义方法
$.extend({ "方法名":function(){...}})