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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进击的君君的前端之路

CSS选择器知识点整理

1755
来自专栏ytkah

css继承样式怎么控制?用选择器

  css样式继承性是指下级的样式属性会继承上级的属性,通俗点讲是儿子来继承父亲的属性,比如li会继承ul的属性。css继承原理是我们设置上级(父级)的CSS样...

3935
来自专栏zaking's

CSS(CSS3)选择器(1)

这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增...

29010
来自专栏flutter开发者

自定义View案例【LabelView】

在前面的几篇文章中我们介绍了Flutter中自定义view的用法,学习了canvas中常用的绘制方法,在这篇及以后的几篇文章中我会给大家写几个自定义View的例...

1852
来自专栏james大数据架构

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

1949
来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

5249
来自专栏HTML5学堂

详析设置样式的方法

上一期文章当中,小编与大家详细的总结了获取标签的方法,能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签,可以回复“获取标签”到“HTML5学堂”...

3207
来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

1609
来自专栏闻道于事

JavaWeb(八)JQuery

jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

2804
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— 使用DOM完成属性填充

  本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了: 1 DOM四个常用的方法   首先看一下效果,初始时是一个相册,可以点击...

1819

扫码关注云+社区