21.jQuery

zhang_derek

发布于 2018-04-11 14:47:04

3K0

发布于 2018-04-11 14:47:04

文章被收录于专栏：有趣的django

简介

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018-01-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery