jQuery教程PPT课件

.
4
层次选择器
• jQuery(‘ancestor descendant’):选取ancestor中的所有的 descendant(后代)元素
• jQuery(‘parent>child’):选取parent中的所有的child(子元素)
• jQuery(‘prev+next’):选取紧跟在prev后的同级别的next元素 可用next()方法代替
.
14
元素操作：
• remove() 删除节点 例 jQuery(‘ul li’).remove() 也可在remove() 中添加过滤条件 jQuery(‘ul li’).remove(‘li[title!=菠萝]’)
• empty() 清空节点 jQuery(‘ul li:eq(1)’).empty() 清空第二个li 元素中的内容
• :lt(index) 选取索引值小于index的所有的元素 从0开始
• :header 选取所有的标题元素 例Βιβλιοθήκη Baiduh1 h2 h3等
• :animated 选取所有的正在执. 行动画的元素
7
内容过滤选择器 • :contains(text) 选取含有文本内容为text的元素 • :empty 选取不包含子元素的空元素 • :has(selector) 选取含有选择器所匹配的元素的元素 • :parent 选取含有子元素的元素
• :file 选取所有的上传域
• :hidden 选取所有的不可见元素 (包括display为none的)
.
13
jQuery中DOM操作
• append() 向匹配的元素追加内容 • appendTo() 颠倒append()操作 • prepend() 向匹配的元素前置内容 • preprendTo() 颠倒prepend()操作 • after() 在匹配的元素后插入内容 • insertAfter() 颠倒after()操作 • before() 在匹配的元素前插入内容 • insertBefore() 颠倒before()操作
.
3
基本选择器是最常用的选择器 可以根据标签的名字、ID名字或者 class名字来选择元素
#id 根据指定的id来匹配元素
.class 根据制定的类名字来匹配元素
element 根据指定的元素的名字匹配元素
* 匹配所有的元素
selector1,selector2,…selectorN 将每一个匹配到的元素合并到一起返 回
注意与基本过滤选择器的区别
.
11
表单过滤选择器
• :enabled 选取所有的可见的元素 • :disabled 选取所有的不可见的元素 • :checked 选取所有的选中的元素(单选框、复选框) • :selected 选取所有的被选中的元素(下拉菜单)
.
12
表单选择器
• :input 选取所有的<input>、<textarea>、<select>、 <button>元素
• clone() 复制节点 jQuery(‘#li’).clone().appendTo(‘ul’) 如果想 在复制节点的同时也具有行为 可用clone(true)
• replaceWith() 替换节点 如jQuery(‘p’).replaceWith(‘<strong> 你最不喜欢的水果是?</strong>’)
Jquery基础教程
.
1
jQuery优势
• 轻量级 • 强大的选择器 • 出色的DOM操作的封装 • 可靠的事件处理机制 • 完善的Ajax • 不污染顶级变量 • 出色的浏览器兼容性 • 链式操作方式 • 隐式迭代 • 行为和结构层分离 • 丰富的插件支持 • 完善的文档 • 开源
.
2
jQuery选择器是其最核心的部分 分为四大类 • 基本选择器 • 层次选择器 • 过滤选择器 • 表单选择器
• :last 选取最后一个元素
• :not(selector) 去除与跟定选择器匹配的元素
• :even 选取索引值为偶数的所有的元素 从0开始
• :odd 选取索引值为奇数的所有的元素 从0开始
• :eq(index) 选取索引值等于index的所有的元素 从0开始
• :gt(index) 选取索引值大于index的所有的元素 从0开始
• :text 选取所有的单行文本框
• :password 选取所有的密码框
• :radio 选取所有的单选按钮
• :checkbox 选取所有的复选按钮
• :submit 选取所有的提交按钮
• :image 选取所有的图像按钮
• :reset 选取所有的重置按钮
• :button 选取所有的button
.
10
子元素过滤选择器
• nth-child(index/even/odd/equation) 选取每个父元素下的第 index子元素/奇元素/偶元素/比较元素 索引从1开始 • first-child 选取每个父元素的第一个子元素 • last-child 选取每个父元素的最后一个元素 • only-child 如果该元素是其父元素的唯一的子元素 那么该 元素就会匹配到
.
8
可见性过滤选择器 • :hidden 选取所有的不可见的元素
• :visible 选取所有的可见的元素
.
9
属性过滤选择器
• [attribute] 选取拥有此属性的元素 • [attribute=value] 选取属性值为value的元素 • [attribute!=value] 选取属性值不等于value的元素 也包括不 含属性名为attribute的元素 • [attribute^=value] 选取属性值以value开头的元素 • [attribute$=value] 选取属性值以value结尾的元素 • [attribute*=value] 选取属性值含有value的元素 • [selector1][selector2][selector3] 用属性选择器合并成一个复 合选择器
• jQuery(‘prev~siblings’):选取紧跟在prev后的同级别的所有的 元素 可用nextAll()方法代替
.
5
过滤选择器分为：
• 基本过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 子元素过滤选择器
• 属性过滤选择器
• 表单过滤选择器
.
6
基本过滤选择器
• :first 选取第一个元素