jquery

博客

1. 样式操作
2. 文本操作
3. 属性操作
4. 文档处理
5. 事件

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

基础语法

$(selector).action()

1. 查找标签
2. 操作标签

1. 选择器
   

   $("tagName")

   $("#id")

   $(".className")

   $("div.c1")  // 找到有c1 class类的div标签

   $("*")

   $("#id, .className, tagName")

   $("x y");// x的所有后代y（子子孙孙）
   $("x > y");// x的所有儿子y（儿子）
   $("x + y")// 找到所有紧挨在x后面的y
   $("x ~ y")// x之后所有的兄弟y

   
   
2. 筛选器
   

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

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

   
   
3. 练习:自定义模态框，使用jQuery实现弹出和隐藏功能。
4. 属性选择器
   

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

   例子
   

   // 示例
   <input type="text">
   <input type="password">
   <input type="checkbox">
   $("input[type='checkbox']");// 取到checkbox类型的input标签
   $("input[type!='text']");// 取到类型不是text的input标签

   
   
5. 表单常用筛选
   

   :text
   :password
   :file

   :radio
   :checkbox
   
   :submit
   :reset
   :button

   例子
   

   $(":checkbox")  // 找到所有的checkbox

   表单对象属性:

   :enabled
   :disabled
   :checked
   :selected
   例子

   <form>
     <input name="email" disabled="disabled" />
     <input name="id" />
   </form>
   $("input:enabled")  // 找到可用的input标签
   下拉框案例

   <select id="s1">
     <option value="beijing">北京市</option>
     <option value="shanghai">上海市</option>
     <option selected value="guangzhou">广州市</option>
     <option value="shenzhen">深圳市</option>
   </select>
   
   $(":selected")  // 找到所有被选中的option

   
   
6. 筛选器
   

   下一个元素：

   $("#id").next()
   $("#id").nextAll()
   $("#id").nextUntil("#i2")

   上一个元素：

   $("#id").prev()
   $("#id").prevAll()
   $("#id").prevUntil("#i2")

   父亲元素：

   $("#id").parent()
   $("#id").parents()  // 查找当前元素的所有的父辈元素
   $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

   儿子和兄弟元素：

   $("#id").children();// 儿子们
   $("#id").siblings();// 兄弟们

   查找元素：

   $("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

   补充：

   .first()// 获取匹配的第一个元素
   .last()// 获取匹配的最后一个元素
   .not()// 从匹配元素的集合中删除与指定表达式匹配的元素
   .has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

   案例:左侧菜单