转自 https://www.cnblogs.com/liwenzhou/p/8178806.html
为什么要用jQuery
做同样的事,jQuery写起来极其简练
jQuery相当于JavaScript的第三方模块(原生的DOM是基础)
jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序
学习内容
0,查找标签/属性
1,改变标签
2,改变标签中的属性
3,改变标签的样式
4,事件相关
5,动画效果
6,其他方法
导入jQuery
<script src="jquery-3.2.1.min.js"></script>
推荐在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="text"> <input type="password"> <input type="checkbox"> $("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("<div>new world</div>") // <div>new world</div>替换掉div $("#id1").append("<p>段落1</p>") // 在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是隐式的
例子
<input type="checkbox" id="i1" value="1"> // 针对上面的代码， $("#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(){...}})