jQuery快速入门专题

jquery入门专题

本人博客特点：最高重要等级为*****（五红星），依次减少代表重要性相对较低！

jquery简介

jquery 是一个 javascript的一个库，也就是说jquery是基于javascript框架开发出来的。其目的是为了最大化的简化了javascript书写方式。

jquery设计的宗旨是“write less，do more”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种更为简便的javascript设计模式，优化html文档操作、事件处理、动画设计和ajax交互。

jquery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。———本段来自网络

 

jquery内容

1.  查找标签（选择器）

2.  筛选器

3.  操作标签

　　3.1.  样式操作

　　3.2.  位置操作

　　3.3.  文本操作

　　3.4.  属性操作

　　3.5.  文档操作

4.  事件

5.  动画

6.  插件

jquery对象

　　 jquery对象是通过jquery包装dom对象后产生的对象。按平时的使用来说，只能是jquery对象，才能使用jquery里面的方法【因为，平时在写一个js脚本的时候，里面可能有js原生的东西，也可能会有jquery的一些语法一起使用（这里涉及的到javascript和jquery之间的相互转换，下面内容会提到） 】。jquery的方法是用例子如：$( "#nav" ).html()。

　　“ $( "#nav" ).html() ; ”这一句的代码分析：在这里的 $( "#nav" )就是jquery对象（也就是点的左边），而点的右边html()就是jquery对象的方法。这句话的意思是：获取id值为nav的标签（元素）的html代码。

　　注意：如果html里面有内容，例如: $( "#nav" ).html("<p>555</p>")的意思就不是获取nav标签的html代码了，而是变成了，将nav标签里面的所有html全部被替换成<p>555</p>，这个是涉及到操作方法，下面会有细讲，这里只是做个对比，抱砖引玉而且。

　　与原生javascript对比： “$( "#nav" ).html() ;    相当于原生js的     document.getelementbyid("nav").innerhtml;

　　虽然jquery对象是通过包装dom对象后生成的，但是jquery对象的是无法直接使用dom对象的任何方法，同样dom对象也无法直接使用jquery对象的任何方法。（这里也涉及的到javascript和jquery之间的相互转换，下面内容会提到） 

　　大家的约定：当我们要声明一个jquery对象的变量的时候要在变量的前面加入$符号：例如

　　　　var  $run = jquery对象      

　　　　var run = dom对象

　　javascript和jquery之间的相互转换：

　　　　拿上面的例子来说：

　　　　　　jquery对象：$( "#nav" )

　　　　　　dom对象：document.getelementbyid("nav")

　　　　　　1.  jquery对象转换成dom对象：$( "#nav" )[0] ***********************************************************在jquery对象添加一个索引，即可变成了dom对象（因为jquery对象获取到的标签是一个数组）

　　　　　　2.  dom对象转换成jquery对象：$(document.getelementbyid("nav"))或者 $($( "#nav" )[0]  )  ******在dom对象的外面添加   $() 就可以jquery对象

jquery基础语法

 jquery语法是通过选取（查找）html元素，并随之对已选取到的元素执行某些操作。

基础语法：$(selector).action()

 

• selector：选择符。”查询“和”查找”html文档里面的元素。

 

• action：query对元素的操作。

实例：

• $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

• $("#test").hide() - 隐藏所有 id="test" 的元素

jquery查找标签（选择器）

基本选择器 

id选择器：

$("#main_id")

标签选择器：

$("div")

$("p")

$("img")

class（样式类）选择器：

 $(".main_class")

配合使用：

$("div.main_class")
或者

$("div#main_class")

 

通用选择器：

 $("*")

 

组合选择器：

$("#main_id,.nav_class,div.main_class")

 

层级选择器

x, y可以为任意选择器，x，可以调换。

$("x y")         //x的所有后代y

$("x>y")          //x的所有儿子y

$("x+y")          //所有紧挨在x后台的y

$("x~y")         //x的所有兄弟y

 

基本筛选器

常用的筛选器：

//div表示选择器，这里可以是任意选择器。例如;div、#main ul li、x~y等等

$("div:first")  //第一个
$("div:last")　　//最后一个
$("div:eq(index)")    //索引等于index的那个元素
$("div:even")　　　　　　　//比配所有索引值为偶数的元素，从0开始计数
$("div:odd")　　　　　　　　//比配所有索引值为奇数的元素，从0开始计数
$("div:gt(index)")   　　　　//比配所有大于给定索引值的元素
$("div:lt(index)")　　　　　　//比配所有小于给定索引值的元素
$("div:not(元素选择器)")   　　//移除所有满足not条件的标签
$("div:has(元素选择器)")　　　　//选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

 

例子：

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

练习：

未更新

  

属性选择器

attribute：”属性“的意思。

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子：

<input type="text">;
<input type="password">;
<input type="button">;
//应用

$("input[type='text']");

$("input[type='password']");   // 取到password类型的input标签

$("input[type!='button']");// 取到类型不是button的input标签

 

 

表单选择器

 分为两组来记，第一组（五个），第二组（三个，都是按钮）

:text                     //例子：$(":text ")     找到表单中的所有text
:password             //例子：$(":password")      找到表单中的所有password
:checkbox             //例子：$(":checkbox")      找到表单中的所有checkbox
:radio                   //例子：$(":radio")
:file                      //例子：$(":file")

:submit                 //例子：$(":submit")
:reset                    //例子：$(":reset")
:button                  // 例子：$(":button ") 

 

通过属性找到对应的标签(4个)：

:enabled       //标签可用属性
:disabled　　　　//标签可用属性
:checked 
:selected

例子：

1.找到可用的input标签

<form>
　　<input  name="username" disabled="disabled">
　　<input name="id" />
</form>
$("input:enabled")  // 找到可用的input标签

2.找到被选中的option：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

jquery筛选器

找下一个元素：

$("#nav").next();
$("#nav").nextall();
$("#nav").nextuntil("#id");

找上一个元素：

$("#nav").prev();
$("#nav").prevall();
$("#nav").prevuntil("#id");

 

找父亲元素：

$("#nav").parent();
$("#nav").parents();     //查找当前元素的所有父辈
$("#nav").parentsuntil("#id"); //查找当前标签的所有父辈，直到找到id值为id的父辈元素

 

找儿子和兄弟元素：

$("#nav").children();   //查找当前元素下面的所有儿子们
$("#nav").siblings();    //查找与当前元素是兄弟（同级）们

 

查找方法（   .find()   ）：

搜索当前元素的指定后代元素的方法。这个方法是找出正在处理的元素的后代的好方法。

$("div").find("p");      //这句话等价于  $("div p");

 

筛选方法（   .filter()  ）：

筛选出与filter方法括号内表达式匹配的元素集合。这个方法可以很好的缩小匹配范围，filter方法括号内的选择器表达式可以是多个，逗号分隔即可。跟组合选择器一样。

$("div").filter(".c1")  // 从div结果集中过滤出有c1样式类   这句话等价于 $("div.c1")

 

几个筛选器和筛选方法的对比：

.first() // 获取匹配的第一个元素                     　　　　　　   筛选器:　　:first
.last() // 获取匹配的最后一个元素　　　　　　　　　　　　　　　　　　　　筛选器:　　:last
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素　　　　　　　　　 筛选器:　　:not(元素选择器)
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。　　 　　筛选器:　　:has(元素选择器)
.eq() // 索引值等于指定值的元素　　　　　　　　　　　　　　　　　　　　　筛选器:　　 :eq(index)

　　两个不同点：

　　　　1.筛选方法前面是点“.“，筛选器是冒号”:”

　　　　2.筛选方法后面有小括号，筛选器则是没有

 

例子：

待更新………………

jquery操作标签

 

jquery事件

 

jquery动画

 

jquery插件