为什么要用 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 文本
样式操作
- .addClass(); // 添加指定的 CSS 类名.
- .removeClass(); // 移除指定的 CSS 类名.
- .hasClass(); // 判断样式存不存在
- .toggleClass(); // 切换 CSS 类名, 如果有就移除, 如果没有就添加.
示例
$("#id1").addClass("c2") // 找到 id 为 id1 的元素, 添加样式 c2
属性操作
自定义属性
用于 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(){...}})
来源: http://www.bubuko.com/infodetail-2782128.html