21.jQuery
简介
jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
引用方法:<script
src="jquery-1.12.4.js"></script>
基本选择器
1.id选择器
<div id="i1">111</div>
$('#i1')
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
$('#i1')[0]
<div id="i1">111</div>
2.clss选择器
<div class="c1">222</div>
$('.c1')
jQuery.fn.init [div.c1, prevObject: jQuery.fn.init(1), context: document, selector: ".c1"]
$('.c1')[0]
<div class="c1">222</div>
3.标签选择器
查找所有的a标签
<div class="c1">
<a>111</a>
<a>222</a>
<a>333</a>
</div>
$('a')
4.一次查多个
<div id="i1">111</div>
<div class="c1">
<a>111</a>
<a>222</a>
<a>333</a>
</div>
$('#id.c1,a')
层级选择器
1. ancestor descendant(查找包含的所有-子子孙孙)
<div id="i1" class="c1">
<div>
<a>a</a>
</div>
<div>
<a>b</a>
<a>c</a>
</div>
</div>
$('#i1 a')
2.parent > child(只查找下一级所有-儿子)
<div id="i1" class="c1">
<div>
<a>a</a>
</div>
<a>b</a>
<a>c</a>
</div>
$('#i1 > a')
<a>b</a>
<a>c</a>
3.prev + next(查找同级相邻的一个)
<div id="i1" class="c1">
<div>
<input name="name"/>
<a>a</a>
</div>
<a>b</a>
<input name="name"/>
<a>c</a>
<a>d</a>
</div>
$('input + a')
[<a>a</a>, <a>c</a>]
4.prev ~ siblings(查找同级下面所有)
<div id="i1" class="c1">
<div>
<input name="name"/>
<a>a</a>
</div>
<a>b</a>
<input name="name"/>
<a>c</a>
<a>d</a>
</div>
$('input ~ a')
[<a>a</a>, <a>c</a>, <a>d</a>]
基本筛选器
$('li:first') //第一个元素
$('li:last') //最后一个元素
$("tr:even") //索引为偶数的元素,从 0 开始
$("tr:odd") //索引为奇数的元素,从 0 开始
$("tr:eq(1)") //给定索引值的元素
$("tr:gt(0)") //大于给定索引值的元素
$("tr:lt(2)") //小于给定索引值的元素
$(":focus") //当前获取焦点的元素
$(":animated") //正在执行动画效果的元素
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
1.:first(获取匹配的第一个元素)
$('ul li:first')
<li>111</li>
2.:last(获取匹配的最后一个元素)
$('ul li:last')
<li>555</li>
3.:eq(匹配一个给定索引值的元素)
$('ul li:eq(2)')
<li>333</li>
4.gt(匹配所有大于给定索引值的元素)
$('ul li:gt(2)')
<li>444</li> <li>555</li>
5.:lt (匹配所有小于给定索引值的元素)
$('ul li:lt(2)')
<li>111</li> <li>222</li>
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从 0 开始计
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:lang(language) 选择指定语言的所有元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus 匹配当前获取焦点的元素
:root 选择该文档的根元素
:targe 选择由文档URI的格式化识别码表示的目标元素
属性选择器
1. [ ](匹配包含给定属性的元素)
<div class="c1">
<div name="derek"> derek</div>
<div name="jack"> jack</div>
</div>
$('div[name]')
<div name="derek"> derek</div>
<div name="jack"> jack</div>
2.[a="b"](匹配给定的属性是某个特定值的元素)
<div class="c1">
<div name="derek"> derek</div>
<div name="jack"> jack</div>
</div>
$('div[name="derek"]')
<div name="derek"> derek</div>
attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用
表单选择器
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
用:input,:text ,:password,:radio,:checkbox........
$(':text')
[<input type="text">]
$(':password')
[<input type="password">]
表单对象属性
1.:enabled(匹配所有可编辑元素)
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled")
[<input name="id" />]
2.:disabled(匹配所有不可编辑元素)
$("input:disabled")
[<input name="email" disabled="disabled" />]
3.:checked(匹配所有选中的被选中元素)
<form>
篮球:<input type="checkbox" name="favor" value="1" />
足球:<input type="checkbox" name="favor" value="2" />
台球:<input type="checkbox" name="favor" value="3" checked="checked" />
</form>
$("input:checked")
<input type="checkbox" name="favor" value="3" checked="checked">
4.:selected(匹配所有选中的option元素)
<select>
<option value="1">篮球</option>
<option value="2" selected="selected">足球</option>
<option value="3">台球</option>
</select>
$("select option:selected")
<option value="2" selected="selected">足球</option>
筛选器
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,子子孙孙
$("p").next() //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
1.next(紧邻的同级下一个元素)
<p>11</p>
<span>22</span>
<div>33</div>
$("p").next()
<span>22</span>
2.prev(紧邻的同级上一个元素)
$("span").prev()
<p>11</p>
3. parent(匹配元素的唯一父元素)
<div>
<span>111</span>
<div>
<p>222</p>
<div>
<a>333</a>
</div>
</div>
</div>
$("a").parent()
<div>
<a>333</a>
</div>
4.children(匹配元素所有子元素的元素集合)
<div>
<p>111</p>
<span>
<p>222</p>
</span>
</div>
$("div").children()
[<p>111</p>, <span><p>222</p></span>]
5.siblings(匹配元素所有同级元素的元素集合)
<div>
<p>111</p>
<span>222</span>
<p>333</p>
</div>
$("span").siblings()
[<p>111</p>, <p>333</p>]
6.find(搜索所有与指定表达式匹配的元素)
<div>
<p>111</p>
<span>222</span>
<p>333</p>
</div>
$("div").find('p')
<p>111</p> <p>333</p>
closest 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
nextAll 查找当前元素之后所有的同辈元素
nextUntil 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止
offsetParent 返回第一个匹配元素用于定位的父节点
parents 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选
parentsUntil 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止
prevAll 查找当前元素之前所有的同辈元素
prevUntil 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止
siblings 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选
eq 获取当前链式操作中第N个jQuery对象,返回jQuery对象
first 获取第一个元素
last 获取最后个元素
filter 筛选出与指定表达式匹配的元素集合
is 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
map 将一组元素转换成其他数组(不论是否是元素数组)
has 保留包含特定后代的元素,去掉那些不含有指定后代的元素
not 从匹配元素的集合中删除与指定表达式匹配的元素
slice 选取一个匹配的子集
属性
$('p').html(); //返回p元素的html内容
$("p").html("Hello <b>nick</b>!"); //设置p元素的html内容
$('p').text(); //返回p元素的文本内容
$("p").text("nick"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("nick"); //设置文本框中的内容
1.html(获取和设置匹配元素的内容)
<div>
<p>111</p>
<span>222</span>
<p>333</p>
</div>
获取
$('span').html()
"222"
修改
$('span').html("<span>444</span>")
2.text(获取和设置匹配元素的内容)
$('span').text()
"222"
修改
$('span').text(<span>444</span>)
$('span').text()
"<span>444</span>"
修改后变成了字符串而不再是标签了
3.val(获取和设置input、select框中的内容)
<input type="text" value="默认值"/>
$('input').val()
"默认值"
修改value的值
$('input').val('请输入关键字')
$('input').val()
"请输入关键字"
CSS
1.addClass(为每个匹配的元素添加指定的类名)
<div>
<span>111</span>
</div>
$('span').addClass('c1')
2.removeClass(从所有匹配的元素中删除全部或者指定的类)
<div>
<span class="c1">111</span>
</div>
$('span').removeClass('c1')
3. toggleClass(如果存在就删除、不存在就添加)
$('span').toggleClass('c1')
属性
1.attr(设置或返回自定义属性值)
<input id="i1" type="button" value="开关" />
获取值
$('#i1').attr('type')
"button"
$('#i1').attr('value')
"开关"
$('#i1').attr('id')
"i1"
设置值
$('#i1').attr('name','derek')
<input id="i1" type="button" value="开关" name="derek"/>
2.removeAttr(删除自定义属性)
$('#i1').removeAttr('name')
3.prop(专门用于checkbox,radio)
<input id="i1" type="checkbox" checked="checked" />
# 判断
> ('input:checkbox').prop('checked')
< true
# 设置
> $('input:checkbox').prop('checked',false)
< [<input id="i1" type="checkbox" checked="checked">]
> $('input:checkbox').prop('checked')
< false
# 禁用
> $('input:checkbox').prop('disabled')
< false
> $('input:checkbox').prop('disabled',true)
< [<input id="i1" type="checkbox" checked="checked" disabled>]
4.removeProp(用来删除由.prop()方法设置的属性集)
<input id="i1" type="checkbox" checked="checked" />
> $('input:checkbox').prop('disabled',true)
< [<input id="i1" type="checkbox" checked="checked" disabled>]
> $('input:checkbox').removeProp('disabled')
< [<input id="i1" type="checkbox" checked="checked">]
文档处理
1.内部添加
(1)append(向每个匹配的元素内部追加内容)
<div class="d1">
<p>第一行</p>
</div>
$("div").append("<p>第二行</p>")
(2)prepend(向每个匹配的元素内部前置内容)
$("div").prepend("<p>第零行</p>")
第零行
第一行
第二行
2.外部添加
after(在每个匹配的元素之后插入内容)
<div class="d1">
<p>第一行</p>
</div>
> $("div").after("<div>下面另起一行</div>");
< [<div class="d1"><p>第一行</p></div>]
> $("div")
< [<div class="d1"><p>第一行</p></div>, <div>下面另起一行</div>]
before(在每个匹配的元素之前插入内容)
<div class="d1">
<p>第一行</p>
</div>
> $("div").before("<div>上面另起一行</div>");
< [<div class="d1"><p>第一行</p></div>]
> $("div")
< [<div>上面另起一行</div>, <div class="d1"><p>第一行</p></div>]
3.删除
1. empty(删除匹配的元素集合中内容不删除标签)
<div class="d1">
<p>第一行</p>
</div>
> $("p").empty();
< [<p></p>]
> $("div")
< [<div class="d1"><p></p></div>]
2.remove(删除匹配的元素集合包括标签)
<div class="d1">
<p>第一行</p>
</div>
> $("p").remove();
< [<p>第一行</p>]
> $("div")
< [<div class="d1"></div>]
jQuery CSS
1.CSS
css(获取和设置匹配元素的样式属性)
<span style="color:red">111</span>
$('span').css('color') -->获取
$('span').css('color','black') -->设置
$('span').css({'color':'#dddddd','background':'blue'}) -->设置多个
2.位置
$('p').offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position() //元素相对父元素的偏移,对可见元素有效,Object {top: 117, left: 250}
$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop('100') //设置滚轮滑的高度为100
(1)offset(获取和设置匹配元素在整个html的相对坐标)
$('#i1').offset()
(2)position(获取匹配元素相对父元素的坐标)
$('#i1').position()
(3)scrollTop(获取和设置滚动条到顶部的坐标)
<div style="height: 100px;width:100px;overflow: auto">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div style="height: 1000px;"></div>
# 获取滚动条坐标
> $(window).scrollTop()
< 0
> $('div').scrollTop()
< 424
(4)scrollLeft(获取和设置滚动条到左侧的坐标)
<div style="height: 100px;width:100px;overflow: auto">
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
<div style="height: 1000px;width: 2000px"></div>
# 获取
> $(window).scrollLeft()
< 0
# 设置
> $(window).scrollLeft(300)
< [Window]
> $(window).scrollLeft()
< 300
3.尺寸
height 取得匹配元素当前计算的高度值(px)
innerHeight 获取第一个匹配元素内部区域高度(包括补白、不包括边框)
outerHeight 获取第一个匹配元素外部高度(默认包括补白和边框)
width 取得第一个匹配元素当前计算的宽度值(px)
innerWidth 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
outerWidth 获取第一个匹配元素外部宽度(默认包括补白和边框)
事件
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
- 关于索引的使用模式(r3笔记56天)
- 关于oracle中的半连接(r3笔记55天)
- 关于正则表达式第三篇(r3笔记第52天)
- 关于正则表达式第四篇(r3笔记第53天)
- 外部表简单总结(r3笔记第51天)
- 通过shell脚本监控sql执行频率(r3笔记第50天)
- 和Null有关的函数(r3笔记第48天)
- 关于查询转换的一些简单分析(二) (r3笔记第68天)
- 跨网络拷贝文件的简单实践(r3笔记第67天)
- 关于enq: TX - allocate ITL entry的问题分析(r3笔记第66天)
- Tensorflow学习:使用Tensorflow搭建深层网络分类器
- 关于interval partitioning(r3笔记65天)
- Spark Tips4: Kafka的Consumer Group及其在Spark Streaming中的“异动”(更新)
- 关于数据库中的一些name(r3笔记第64天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第05期:Prometheus 数据查询(一)
- 技术分享 | MySQL 复制那点事 - Seconds_behind_Master 参数调查笔记
- 线程有多少种状态?Runnable 一定在执行任务吗?
- swift 中类(class)和结构体(struct)区别
- C语言三剑客之《C专家编程》一书精华提炼
- 前端必备技能:json-server全攻略
- 温故知新——Spring AOP(二)
- R语言中的偏最小二乘PLS回归算法
- R如何与Tableau集成分步指南
- 漏洞复现 | CVE‐2020‐5902踩坑记
- PCA图显示分组无差异,怎么办?
- 我接手了一个“垃圾”系统,全栈优化后将性能提升了350倍
- 用 eggnog-mapper 进行功能注释
- 将SAP C4C Custom BO使用ABSL编写的逻辑通过OData服务暴露出去
- Linux笔记(14)| 字符设备驱动基础入门(续)