jQuery
引入
- # 下载链接: https://jquery.com/
- # 第一种方法: 本地引入
- <script src="jquery.js"></script>
- <script>
- </script>
- # 第二种方法: 网址引入
- <script src="https://cdn.bootCSS.com/jquery/3.4.1/jquery.js"></script>
jq 与 JS
? jQuery 方法找到的标签对象称为 jQuery 对象
? 原生 JS 找到的标签对象称之为 DOM 对象, DOM 对象只能调用 DOM 对象的方法, jQuery 对象只能用 jQuery 方法, 不能互通
var $obj = jQuery 对象;
var obj = DOM 对象;
$obj[0] # 通过 [索引] 的方法从 jQuery 中获取的取对象, 全部是 DOM 对象
dom 对象转换为 jQuery 对象 : $(dom 对象) -- jQuery 对象
JQ 的基础语法
查找标签
基本选择器(同 CSS)
- # id 选择器
- $("#id")
- # 标签选择器
- $("tagName")
- # class 选择器
- $(".className")
- # 配合使用
- $("div.c1")
- # 所有元素选择器
- $("*")
- # 组合选择器
- $("#id, .className, tagName")
层级选择器(同 CSS)
? x 和 y 可以为任意选择器
- $("x y")
- # x 的所有后代 y(子子孙孙)
- $("x> y")
- # x 的所有儿子 y
- $("x + y")
- # 找到所有紧挨在 x 后面的 y
- $("x - y")
- # x 之后所有的兄弟 y
基本筛选器(选择之后进行过滤)
- :first
- # 第一个
- :last
- # 最后一个
- :eq(index)
- # 索引等于 index 的那个元素
- :even
- # 匹配所有索引值为偶数的元素, 从 0 开始计数
- :odd
- # 匹配所有索引值为奇数的元素, 从 0 开始计数
- :gt(index)
- # 匹配所有大于给定索引值的元素
- :lt(index)
- # 匹配所有小于给定索引值的元素
- :not(元素选择器)
- # 移除所有满足 not 条件的标签
- :has(元素选择器)
- # 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
? 示例:
- $("div:has(h1)")
- # 找到所有后代中有 h1 标签的 div 标签, 意思是首先找到所有 div 标签, 把这些 div 标签的后代中有 h1 的 div 标签筛选出来
- $("div:has(.c1)")
- # 找到所有后代中有 c1 样式类 (类属性 class='c1') 的 div 标签
- $("li:not(.c1)")
- # 找到所有不包含 c1 样式类的 li 标签
- $("li:not(:has(a))")
- # 找到所有后代中不含 a 标签的 li 标签
属性选择器
- [attribute]
- [attribute=value]
- # 属性等于
- [attribute!=value]
- # 属性不等于
? 示例:
- # 示例, 多用于 input 标签
- <input type="text">
- <input type="password">
- <input type="checkbox">
- $("input[type='checkbox']");
- # 取到 checkbox 类型的 input 标签
- $("input[type!='text']");
- # 取到类型不是 text 的 input 标签
表单筛选器 (多用于找 form 表单里面出现的 input 标签, 当然通过属性选择器找肯定也是没问题的, 这样就是写着简单一些)
- :text
- :password
- :file
- :radio
- :checkbox
- :submit
- :reset
- :button
- # 示例:
- <div>
- 用户名: <input type="text">
- </div
- <div>
- 密码: <input type="password">
- </div>
- <div>
- sex:
- <input type="radio" name="sex">男
- <input type="radio" name="sex">女
- <input type="radio" name="sex">不详
- </div>
- # 找到 type 为 text 的 input 标签: $(":text")
表单对象属性
- :enabled
- :disabled
- :checked
- :selected
- # 示例:
- <div>
- 用户名: <input type="text">
- </div>
- <div>
- 密码: <input type="password" disabled>
- </div>
- <div>
- sex:
- <input type="radio" name="sex">男
- <input type="radio" name="sex">女
- <input type="radio" name="sex">不详
- </div>
- <select name=""id="">
- <option value="1">怼姐</option>
- <option value="2">珊姐</option>
- <option value="3">华丽</option>
- <option value="4">亚索</option>
- </select>
- # 操作:
找到可以用的标签 -- $(':enabled')
找 select 标签被选中的 option 标签 --$(':selected')
链式表达式
- <ul>
- <li > 陈硕</li>
- <li > 子文</li>
- <li class="c1">李业</li>
- <li > 吕卫贺</li>
- <li > 峡谷先锋珊姐</li>
- <li class="c2">怼姐</li>
- <li > 骚强</li>
- </ul>
- # 操作 $('li:first').next().CSS('color','green').next().CSS('color','red');
筛选器方法
- # 下一个
- $("#id").next()
- $("#id").nextAll()
- $("#id").nextUntil("#i2") #直到找到 id 为 i2 的标签就结束查找, 不包含它
- # 上一个
- $("#id").prev()
- $("#id").prevAll()
- $("#id").prevUntil("#i2")
- <ul>
- <li > 陈硕</li>
- <li > 子文</li>
- <li class="c1">李业</li>
- <li > 吕卫贺</li>
- <li > 峡谷先锋珊姐</li>
- <li class="c2">怼姐</li>
- <li > 骚强</li>
- </ul>
- # 示例:
- $('li:first').next()
- # 找到第一个标签的下一个标签
- $('.c2').prevUntil('.c1');
- # 找到类属性 c2 标签后的直到有类属性 c1 的标签
- # 父元素
- $("#id").parent()
- $("#id").parents()
- # 查找当前元素的所有的父辈元素(爷爷辈, 祖先辈都找到)
- $("#id").parentsUntil('body')
- # 查找当前元素的所有的父辈元素, 直到遇到匹配的那个元素为止, 这里直到 body 标签, 不包含 body 标签, 基本选择器都可以放到这里面使用.
- # 儿子和兄弟元素:
- $("#id").children();
- # 儿子们
- $("#id").siblings();
- # 兄弟们, 不包含自己,.siblings('#id'), 可以在添加选择器进行进一步筛选
- $("div").find("p")
- # 查找 find, 找的是后代
- # 等价于 $("div p"),
- $("div").filter(".c1")
- # 筛选 filter
- # 等价于 $("div.c1")
- # 从结果集中过滤出有 c1 样式类的, 从所有的 div 标签中过滤出有 class='c1'属性的 div, 和 find 不同, find 是找 div 标签的子子孙孙中找到一个符合条件的标签
- $("div").first()
- # 获取匹配的第一个元素
- $("div").last()
- # 获取匹配的最后一个元素
- $("div").not()
- # 从匹配元素的集合中删除与指定表达式匹配的元素
- $("div").has()
- # 保留包含特定后代的元素, 去掉那些不含有指定后代的元素.
- $("div").eq()
- # 索引值等于指定值的元素
操作标签
样式操作
- $("div").addClass();
- # 添加指定的 CSS 类名
- $("div").removeClass();
- # 移除指定的 CSS 类名
- $("div").hasClass();
- # 判断样式
- $("div").toggleClass();
- # 切换 CSS 类名, 如果有就移除, 如果没有就添加
CSS 操作
- $("div").CSS("background-color","green")
- # 单个 CSS 操作方式
- $("div").CSS({
- "background-color":"yellow", "width":"400px"
- })
- # 多个 CSS 操作方式
位置操作
- $("div").offset()
- # 获取匹配元素在当前窗口的相对偏移或设置元素位置
- # 此方法允许我们检索一个元素相对于文档 (document) 的当前位置.
- $("div").position()
- # 获取匹配元素相对父元素的偏移, 不能设置位置
- # .offset()方法 和 .position()的差别在于: .position()获取相对于它最近的具有相对位置 (position:relative 或 position:absolute) 的父级元素的距离, 如果找不到这样的元素, 则返回相对于浏览器的距离
- $(".c2").offset()
- # 查看位置
- $(".c2").offset({
- top:100, left:200
- })
- # 设置位置
- $(Windows).scrollTop()
- # 滚轮向下移动的距离
- $(Windows).scrollLeft()
- # 滚轮向右移动的距离
尺寸
- height()
- width()
- # 盒子模型 content 的大小, 就是我们设置的标签的高度和宽度
- innerHeight()
- innerWidth()
- # 内容 content 高度 + 两个 padding 的高度
- outerHeight()
- outerWidth()
- # 内容高度 + 两个 padding 的高度 + 两个 border 的高度, 不包括 margin 的高度, 因为 margin 不是标签的, 是标签和标签之间的距离
文本操作
html 代码:
- $(".c1").HTML()
- # 取得第一个匹配元素的 HTML 内容, 包含标签内容
- $(".c1").HTML(val)
- # 设置所有匹配元素的 HTML 内容, 识别标签, 能够表现出标签的效果
文本值:
- $(".c1").text()
- # 取得所有匹配元素的内容, 只有文本内容, 没有标签
- $(".c1").text(val)
- # 设置所有匹配元素的内容, 不识别标签, 将标签作为文本插入进去
值:
- val()
- # 取得第一个匹配元素的当前值
- val(val)
- # 设置所有匹配元素的值
- val([val1, val2])
- # 设置多选的 checkbox, 多选 select 的值
属性操作
? 用于 ID 自带属性等或自定义属性:
- $(".c1").attr(attrName)
- # 返回第一个匹配元素的属性值
- $(".c1").attr(attrName, attrValue)
- # 为所有匹配元素设置一个属性值
- $(".c1").attr({
- k1: v1, k2:v2
- })
- # 为所有匹配元素设置多个属性值
- $(".c1").removeAttr()
- # 从每一个匹配的元素中删除一个属性
? 用于 checkbox 和 radio:
- $(".c1").prop()
- # 获取属性
? prop 和 attr 的区别:
attr 全称 attribute(属性)
prop 全称 property(属性)
虽然都是属性, 但他们所指的属性并不相同, attr 所指的属性是 HTML 标签属性, 而 prop 所指的是 DOM 对象属性, 可以认为 attr 是显式的, 而 prop 是隐式的.
attr 获取一个标签内没有的东西会得到 undefined(反之获取属性名), 而 prop 获取的是这个 DOM 对象的属性, 因此 checked 为 false(反之为 true).
1. 对于标签上有的能看到的属性和自定义属性都用 attr
2. 对于返回布尔值的比如 checkbox,radio 和 option 的是否被选中或者设置其被选中与取消选中都用 prop.
具有 true 和 false 两个属性的属性, 如 checked, selected 或者 disabled 使用 prop(), 其他的使用 attr()
文档处理
- # 添加到指定元素内部的后面
- $(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 的前面
- # 移除和清空元素
- $(".c1").remove()
- # 从 DOM 中删除所有匹配的元素.
- $(".c1").empty()
- # 删除匹配的元素集合中所有的子节点, 包括文本被全部删除, 但是匹配的元素还在
- # 替换
- $("p").replaceWith("aEle")
- $("aEle").replaceAll("p")
- # 这两个都是用 aEle 标签替换掉 p 标签, 只是写法不同
- # 克隆
- $(".c1").clone()
- $(".c1").clone(true)
- # clone 方法不加参数 true, 克隆标签但不克隆标签带的事件, 加参数 true 就带事件.
事件
绑定方法
- $("#d1").click(function () {
- $(this).CSS('background-color','green');
- })
- $('#d1').on('click',function () {
- $(this).CSS('background-color','green');
- })
常用事件
- click(function(){
- ...
- })
- hover(function(){
- ...
- })
- blur(function(){
- ...
- })
- focus(function(){
- ...
- })
- change(function(){
- ...
- })
- # 内容发生变化, input,select 等
- keyup(function(){
- ...
- })
- # mouseover 和 mouseenter 的区别是:
- # mouseover 事件是如果该标签有子标签, 那么移动到该标签或者移动到子标签时会连续触发, mmouseenter 事件不管有没有子标签都只触发一次, 表示鼠标进入这个对象
移除事件(不常用)
- .off( events [, selector ][,function(){
- }])
- # off() 方法移除用 .on()绑定的事件处理程序.
- # 示例:
- $("li").off("click");
事件冒泡
- # 事件冒泡, 子标签和父标签 (祖先标签) 绑定了相同的事件, 比如点击事件, 那么当你点击子标签时, 会一层一层的往上触发父级或者祖父级等等的事件
- $('.c1').click(function () {alert('父级标签!!!');});
- $('.c2').click(function (e) {alert('子标签~~~');
- # 阻止事件冒泡(阻止事件发生)
- return false;
- e.stopPropagation()
- })
事件委托
- <div id="d1">
- <button class="btn">屠龙宝刀, 点击就送 </button>
- </div>
事件委托
- $('#d1').on('click','.btn',function () {
- # $(this)是你点击的儿子标签
- var a= $(this).clone();
- $('#d1').append(a);
- });
- # 中间的参数是个选择器, 前面这个 $('table')是父级标签选择器, 选择的是父级标签, 意思就是将子标签 (子子孙孙) 的点击事件委托给了父级标签
- # 但是这里注意一点, 你 console.log(this); 你会发现 this 还是触发事件的那个子标签, 这个记住
页面载入
- Windows.onload
- # 原生 JS 的 Windows.onload 事件
- # onload 等待页面所有内容加载完成之后自动触发的事件
- Windows.onload = function(){
- $('.c1').click(function () {
- $(this).addClass('c2');
- });
- };
- # jQuery 页面载入:
- $(function () {
- $('.c1').click(function () {
- $(this).addClass('c2');
- });
- })
- # 非简写方式
- $(document).ready(function(){
- # 在这里写你的 JS 代码...
- })
- # 与 Windows.onload 的区别
1.Windows.onload()函数有覆盖现象, 必须等待着图片资源加载完成之后才能调用
2.jQuery 的这个入口函数没有函数覆盖现象, 文档加载完成之后就可以调用(建议使用此函数)
- each
- # 循环数组:
- var a = [11,22,33];
- $.each(a,function(k,v){
- console.log(k,v);
- })
- # 循环标签对象:
- $('li').each(function(k,v){
- console.log(k,$(v).text());
- })
- # return false; 终止循环
- # 在遍历过程中可以使用 return false 提前结束 each 循环. 类似于 break
- # 而直接使用 return; 后面什么都不加, 不写 false, 就是跳过本次循环的意思 类似与 continue
来源: http://www.bubuko.com/infodetail-3304884.html