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.标签选择器

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

 

属性选择器

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>

 

表单选择器

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

 

 

属性

$('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（在每个匹配的元素之后插入内容）

 

before（在每个匹配的元素之前插入内容）

 

3.删除

1. empty（删除匹配的元素集合中内容不删除标签）

 

2.remove（删除匹配的元素集合包括标签）

 

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.位置

 

（1）offset（获取和设置匹配元素在整个html的相对坐标）

$('#i1').offset()

（2）position（获取匹配元素相对父元素的坐标）

$('#i1').position()

（3）scrollTop（获取和设置滚动条到顶部的坐标）

 

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