一 JQuery 介绍
JQuery 是一个轻量级兼容多浏览器的 JavaScript 库可以更方便的处理 html DocumentEvents 实现动画效果方便的进行 Ajax 交互, 能够极大的简化 JavaScript 编程
JQuery1.X 版本兼容 IE678, 官方制作 BUG 维护, 功能不更新 3.x 版本不兼容 IE678, 只支持最新浏览器, 官方主页维护该版本
JQuery 对象是 JQuery 包装 DOM 对象后产生的对象, 如可以通过 $("#i1").html()获取 id 值为 i1 的元素的 html 代码 JQuery 对象无法使用 DOM 对象的任何方法
一般在声明一个 JQuery 对象变量的时候在变量名前面加上 $, 如 var $variable = JQuery 对象可以通过 $variable[0]将 JQuery 对象转为 DOM 对象
二 JQuery 基础语法
1. 查找标签
id 选择器:
$("#id")
标签选择器:
$("tagName")
class 选择器:
$(".calssName")
配合使用:
$("div.c1") // 具有 c1 样式类的 div 标签
所有元素选择器:
$("*")
组合选择器:
$("#id,.className,tagName")
层级选择器:
x 和 y 可以为任意选择器
- $("x y"); //x 的所有后代 y
- $("x> y"); //x 的所有儿子 y
- $("x + y"); // 找到所有紧挨在 x 后面的 y
- $("x ~ y"); //x 之后所有的兄弟 y
基本筛选器:
- :first // 第一个
- :last // 最后一个
- :eq(index) // 索引等于 index 的那个元素
- :even // 匹配所有索引值为偶数的元素, 从 0 开始计数
- :odd // 匹配所有索引值为计数的元素, 从 0 开始计数
- :gt(index) // 匹配所有大于给定索引值的元素
- :lt(index) // 匹配所有小于给定索引值的元素
- :not(元素选择器) // 移除所有满足 not 条件的标签
- :has(元素选择器) // 选取所有包含一个或多个标签在内的标签(后代元素中找)
属性选择器:
- [attribute]
- [attribute=value] // 属性等于
- [attribute!=value] // 属性不等于
示例:
- <input type="text">
- <input type="password">
- <input type="checkbox">
- $("input[type=checkbox]") ; // 选取 checkbox 类型的 input 标签
- $("input[type!=text]"); // 选取类型不是 text 的 input 标签
表单常用筛选器:
- :text
- :password
- :file
- :redio
- :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
2. 筛选器
下一个元素:
- $("#id").next()
- $("#id").nextALL()
- $("#id").nextUntil("#i2")
上一个元素:
- $("#id").prev()
- $("#id").prevAll()
- $("#id").prevUntil("#i2")
父亲元素:
- $("#id").parent()
- $("#id").parents() // 查找当前元素的所有父辈元素
- $("#id").parentUntil("#i2") // 查找当前元素的所有父辈元素, 知道遇到匹配的那个元素为止
儿子和兄弟元素:
- $("#id").children(); // 儿子们
- $("#id").siblings(); // 兄弟们
查找元素:
$("#id").find() // 搜索所有与指定表达式匹配的元素
补充:
- .first() // 获取匹配的第一个元素
- .last() // 获取匹配的最后一个元素
- .not() // 从匹配元素的集合中删除与指定表达式匹配的元素
- .has() // 保留包含特定后代的元素, 去掉那些不包含指定后代的元素
3. 操作标签
样式类:
- addClass(); // 添加指定的 CSS 类名
- removeClass(); // 移除指定的 css 类名
- hasClass(); // 判定样式是否存在
- toggleClass(); // 切换 css 类名, 如果有就删除, 如果没有就添加
示例: 开关灯的模态框
- //CSS
- css("color","red") //DOM 操作: tag.style.color="red"
- //JQuery
- $("p").css("color","red")
位置:
- offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
- position() // 获取匹配元素相对父元素的偏移
- scrollTop() // 获取匹配元素相对滚动条顶部的偏移
- scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许检索一个元素相对于文档 (document) 的当期位置和. position()的差别在于. position()是相对于父级元素的位移
尺寸:
- height()
- width()
- innerHeight()
- innerWidth()
- outterHeight()
- outerWidth()
文本操作
html 代码:
- html() // 取得第一个匹配元素的 html 内容
- html(val) // 设置所有匹配元素的 HTML 内容
文本值:
- text() // 取得所有匹配元素的内容
- text(val) // 设置所有匹配元素的内容
值:
- val() // 取得第一个匹配元素的当前值
- val(val) // 设置所有匹配元素的值
- val([val1,val2]) // 设置 checkboxselect 的值
示例:
获取被选中的 checkbox 或 radio 的值
- <label for="c1">女</label>
- <input name="gender" id="c1" type="radio" value="0">
- <label for="c2">男</label>
- <input name="gender" id="c2" type="radio" value="1">
JQuery 中使用
$("input[name=gender]:checked").val()
属性操作
用于 id 等或自定义属性:
- attr(attrName) // 返回第一个匹配元素的属性值
- attr(attrName,attrValue) // 为所有匹配元素设置一个属性值
- attr({k1:v1,k2:v2}) // 为左右匹配元素设置多个属性值
- removeAttr() // 从每一个匹配的元素中删除一个属性
用于 checkbox 和 readio
- prop() // 获取属性
- removeProp() // 移除属性
来源: http://www.bubuko.com/infodetail-2531634.html