5.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的格式化识别码表示的目标元素

others

属性选择器

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]    复合属性选择器，需要同时满足多个条件时使用

others

表单选择器

<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    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

others查找

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()

<

（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()

<

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()     //用户离开页面时

5.jQuery的更多相关文章

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能由于jq中的ajax方法是用了内置的deferred模块,是P ...
利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
jquery.uploadify文件上传组件
1.jquery.uploadify简介在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

随机推荐

Webpack 开发服务器代理设置解决跨域问题
在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...
AspNet Core下利用 app-metrics+Grafana + InfluxDB实现高大上的性能监控界面
在日常系统工作中,我们为了洞察系统的问题和运作情况通常会记录日志的方式来进行分析,但是在很多情况下都是被动的在出问题后才会去查日志.在很多时候,我们可能更需要相对实时的了解整个系统或者某一时段的运行的 ...
docker异常问题解决
解决方法: 发现这个问题出现的时候,并不是所有的docker都会出现,只影响某个docker 停下:docker stop app-6019-bonus 再起来:docker start app-60 ...
hbase参数配置和说明
版本:0.94-cdh4.2.1 hbase-site.xml配置 hbase.tmp.dir 本地文件系统tmp目录,一般配置成local模式的设置一下,但是最好还是需要设置一下,因为很多文件都会默 ...
STL 贺习笔记
贺文链接www.cnblogs.com/zhouzhendong/p/STL.html C++ STL 的一些基础用法前言创建一个空的 vector ,我一直是这样写的: vector < ...
react生命周期，中间件、性能优化、数据传递、mixin的使用
https://github.com/lulujianglab/blog/issues/34 一.生命周期 1,初始化的执行顺序,初始生命周期执行过程详解 class initSate extends ...
Python3从零开始爬取今日头条的新闻【一、开发环境搭建】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
sqlzoo:6
第一個例子列出球員姓氏為'Bender'的入球數據. * 表示列出表格的全部欄位,簡化了寫matchid, teamid, player, gtime語句. 修改此SQL以列出賽事編號matchid ...
使用anaconda创建tensorflow环境后如何在jupyter notebook中使用
在以下目录中 C:\Users\UserName\AppData\Roaming\jupyter\kernels\python3 打开kernel.json文件,将python.exe文件的路径修改至 ...
11-Cookie&Session
中文文件下载针对浏览器类型,对文件名字做编码处理 Firefox (Base64) , IE.Chrome ... 使用的是URLEncoder /* * 如果文件的名字带有中文,那么需要对这个文件 ...