读<jquery 权威指南>[1]-选择器及DOM操作

简介:
今天是小年了,2013马上要过去了,但是学习不能间断啊。最近正在看《jQuery权威指南》,先温习一下选择器和DOM操作。

一、基本选择器

1.table单双行:

$(function () {

            $( "#tbStu tr:nth-child(even)" ).addClass("trOdd");

        })

2.jQuery完善的检测机制:

     传统js处理对象时要首先判断是否存在;jQuery具有较完善的检测机制不需要判断,即使该元素不存在,也不会出现错误提示。

3.选择器

①基本选择器:

Image(1)

②层次选择器

Image(2)

注意:

  • $(“ancestor descendant”)是祖先与后代关系,而$(“parent child”)是父级与子级关系;
  • $(“prev+next”)可以使用.next()代替,表示prev后面紧邻的兄弟元素;而$(“prev~siblings”)等同于.nextAll(),表示prev后面所有兄弟元素;siblings()方法表示获取全部的兄弟元素。

③过滤选择器:

Image(5)

Image(6)

Image(7)

Image(8)

Image(9)

Image(10)

Image(11)

二.DOM操作

1.访问元素

①元素属性操作-- attr()

  • 获取元素属性:attr(name)
  • 设置元素属性:

attr(key,value);

attr({key1:value1, key2:value2})

attr(key,function(){}):函数返回值作为属性值。

  • 删除元素属性:removeAttr(name)

②元素内容操作-- html(),text()

Image(12)

③获取或设置元素值-- val()

设置元素值:val(value)

获取元素值:val()

获取select多个选项值:$("select").val().join( ",")

设置多个选中:val(array)。

④元素样式操作

css(name,value):设置样式

addClass("class0 class1"):添加样式

toggleClass(name):切换样式

removeClass(name):删除样式,如果有参数则删除指定类,否则删除所有class。

2.DOM-创建节点

$(html):用于动态创建节点。要注意是否闭合。

3.DOM-插入节点

①内部插入节点

Image(13)

②外部插入节点

Image(14)

4.DOM-复制节点

clone():复制元素,不复制行为。

clone(true):复制元素,同时复制行为。

5.替换节点

replaceWith(content)

replaceAll(selector)

替换完成后元素的事件全部消失。

6.包裹节点

Image(15)

7.删除元素

remove([expr]):选择元素节点后删除该节点及其后代元素。

empty():清空元素及其后代元素。

 



    本文转自 陈敬(Cathy) 博客园博客,原文链接:http://www.cnblogs.com/janes/p/3531526.html,如需转载请自行联系原作者

相关文章
|
1月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
30 2
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
40 5
|
1月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
48 0
|
1月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
18 0
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 选择器
jQuery 选择器
25 3
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
30 1