Jquery(一)

 

1.1jquery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或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+等

      

jQuery可以干啥？

       [1]获取页面的元素。  à (原生JS) DOM à (jQuery)jQuery对象(不能使用原生的方法)

       [2]操作页面元素的属性。

       [3]操作页面元素的样式。

       [4]操作页面元素的事件。

       [5]操作页面元素的内容。

       [6]给页面元素添加动画特效。

       [7]添加各种插件。

你可以忘记原生的JS了。

1.2jQuery安装

Jquery官网：http://jquery.com/

Jquery本身只是一个JS文件，由于JS是不编译的，所有jquery提供的就是源码。

Jquery-2.1.0.js是源代码。

Jquery-2.1.0.min.js是压缩过的代码。（编译过的代码）。

在页面中引入jQuery即可。

1.3jQuery选择器

 jQuery中的 $

 自执行函数：页面一加载就执行了。

jQuery就是通过自执行函数返回jQuery对象本身。

在引入jQuery之后，可以使用

jQuery  或者 window.jQuery 或者 window.$  都是一个意思。

当然window可以省略不写。

大部分都会选择直接使用 $ 。$ 本身就是jQuery对象本身。

jQuery本身就是jQuery的对象也是其构造方法。$也一样。

$.xxxx就是调用jQuery的方法或者属性。

$() 就是调用jQuery构造方法。

 

关于ready函数

Window.onload是页面完全加载完成之后才执行，而jQuery的ready方法是页面文档模型加载完成就执行。Window.onload在页面中只能使用一次，ready可以使用多次。

jQuery首先是要获取页面的元素。

通过jQuery的选择器可以快速的获取页面的元素。

语法：

$(selector) 或者jQuery(selector)

var jQueryObj = $(selector);  //通过jQuery的选择器选择的对象就是jQuery。

[1] 通过该ID获取

#id

$(“#lastname”)

id=lastname 的元素

jQuery返回的对象其实类似于一个数组。

其中索引是：0，context，length   这些有相当于对象的属性可以直接调用

例如：p.context。  p.length  p.selector   p.0  p[0](原生的dom对象)

每个jquery对象中都包含了原生的dom对象。并且提供了其他的丰富的属性和方法。

[2 ] 获取所有 *  $("*") 所有元素

[3] 通过类名 .class $(".intro") 所有 class="intro" 的元素

[4]通过标签名获取  element $("p") 所有 <p> 元素

[5]组合选择器  s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素

[6]属性选择器

[attribute] $("[href]") 所有带有 href 属性的元素

[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素

[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素

[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含 ".jpg" 的元素

通过名称查询：

伪类：

[1] 筛选空元素   :empty $(":empty") 无子（元素）节点的所有元素

[2] 查询包含指定文本的元素 :contains(text) $(":contains('igeek')") 包含文本的所有元素

[3]查询各种表单域的情况：

:input $(":input") 所有 <input> 元素

:text $(":text") 所有 type="text" 的 <input> 元素

:password $(":password") 所有 type="password" 的 <input> 元素

:radio $(":radio") 所有 type="radio" 的 <input> 元素

:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素

:submit $(":submit") 所有 type="submit" 的 <input> 元素

:reset $(":reset") 所有 type="reset" 的 <input> 元素

:button $(":button") 所有 type="button" 的 <input> 元素

:image $(":image") 所有 type="image" 的 <input> 元素

:file $(":file") 所有 type="file" 的 <input> 元素

:enabled $(":enabled") 所有激活的 input 元素

:disabled $(":disabled") 所有禁用的 input 元素

:selected $(":selected") 所有被选取的 input 元素

:checked $(":checked") 所有被选中的 input 元素

 

[4]对查询的结果进行再次筛选的

:first $("p:first") 第一个 <p> 元素

:last $("p:last") 最后一个 <p> 元素

:even $("tr:even") 所有偶数 <tr> 元素

:odd $("tr:odd") 所有奇数 <tr> 元素

:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）

:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素

:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素

:not(selector) $("input:not(:empty)") 所有不为空的 input 元素

 

其他选择方式：

[1]find查找子元素

[2]通过选择查询子元素   $("#p1 [name=gender]")

[3]查询兄弟元素 $(“[type=password]~[name=gender]”)

1.4jQuery属性操作

所谓属性操作就是获取和设置属性值

[1]  attr() 设置或返回匹配元素的属性和值。

S1:在attr(attrName)传入参数属性名，获取属性值

S2:在attr(attrName,attrValue) 设置属性值

S3:使用attr({attrName:attrValue,…. })同时设置多个值

S4:使用attr同时给多个元素设置属性

Tips:选择器选择的是一个元素时，就是操作一个元素的属性，如果是多个元素就是操作多个元素的属性。 

其实对于jQuery来说获取一个元素和获取一组元素都是一样的。为什么一样，参考jQuery对象结构。

S5:获取一个元素的checked属性

当没有设置其checked属性时，获取的是undefined。

如果设置了属性值获取的就是checked

如果通过js设置了其属性值，原生的DOM对象获取的是true或者false。  Jquery获取的依然是checked和undefined。

[2] val() 设置或返回匹配元素的值。

 Val()传入参数就是设置值，不传参数就是获取值。

[3]对class的操作

hasClass() 检查匹配的元素是否拥有指定的类。

addClass() 向匹配的元素添加指定的类名。

removeClass() 从所有匹配的元素中删除全部或者指定的类。

toggleClass() 从匹配的元素中添加或删除一个类。

[4]对HTML内容的操作

html() 设置或返回匹配的元素集合中的 HTML 内容。

Html的使用和val一模一样。传值就设置，不传就是获取。

[5]删除一个属性

removeAttr() 从所有匹配的元素中移除指定的属性。