jQuery核心技巧与DOM操作解析
"jQuery精要" jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。以下是jQuery的一些核心知识点: 1. jQuery对象与DOM对象: - jQuery对象:jQuery函数($)用于包装DOM元素,创建jQuery对象。例如,`jQuery(avg)`或`$('[1,3,5]')`创建了一个jQuery对象。 - DOM对象:jQuery对象可以转换为DOM对象以便进行更底层的操作,如`$('div')[0]`返回第一个`div`元素的DOM节点。 - 互转:jQuery对象可以使用`get()`方法或索引访问其内部的DOM元素,而DOM对象可以通过`$(domObj)`转换成jQuery对象。 2. 选择器: - 基本选择器:通过ID(`#id`)、类(`.class`)、元素(`div`)和通配符(`*`)来选取元素。 - 层次选择器:基于元素的层级关系,如父元素的子元素(`parent > child`)和同级元素(`prev + nextSibling`)。 - 属性选择器:根据属性匹配元素,如`[attribute="value"]`。 - 表单选择器:针对表单元素,如`:text`、`:radio`和`:checkbox`。 - 过滤选择器:包括`:first`、`:last`、`:even`、`:odd`等,用于进一步筛选元素集合。 3. 链式操作: - jQuery对象支持链式调用,因为每个jQuery方法都会返回一个jQuery对象,允许连续调用其他方法。例如,`$('td').avg().css('color', '#f00')`。 4. 动画效果: - jQuery提供了丰富的动画方法,如`fadeIn()`, `slideUp()`, `animate()`等,使得创建复杂的页面过渡和动画变得简单。 5. 事件处理: - 使用`.on()`方法绑定事件,如`$('element').on('click', function() {...})`。 - `.off()`方法用于解除事件绑定,以减少内存占用。 6. Ajax: - `$.ajax()`是jQuery的核心Ajax函数,可以发起异步HTTP请求。 - `$.get()`和`$.post()`是简化的GET和POST请求方法。 - `$.getJSON()`专门用于获取JSON数据。 7. 插件开发: - jQuery.fn(即jQuery.prototype)是扩展jQuery功能的地方,例如自定义方法`jQuery.fn.avg = function() { this... }`。 - 通过这种方式,可以创建可复用的插件,如示例中的`.avg()`方法。 8. 兼容性: - jQuery通常处理了浏览器之间的差异,提供了一致的API,使得代码在不同浏览器间具有良好的兼容性。 掌握这些jQuery知识点,将极大地提高网页开发效率,让动态效果的实现更加简便快捷。通过熟练运用选择器、事件处理和动画,开发者能够构建出交互性强、用户体验优秀的网页应用。
(1) jQuery全局插件函数
定义:jQuery.avg=function(arr){}
调用:jQuery.avg([1,3,5])
(2) jQuery对象插件函数
定义:jQuery.fn.avg=function(){this}
调用:$(‘td’).avg()
区分:DOM对象和jQuery对象
(1)DOM对象:浏览器把每个HTML标签都对应创建一个DOM对象
(2)jQuery对象:通过jQuery选择器函数($())返回的类数组对象,其中封装着DOM对象
(3)jQuery对象不能使用DOM对象的成员;反之也不行!
(4)jQuery对象转换为DOM对象:
$('div')[0].style.color = '#f00';
(5)DOM对象转换为jQuery对象:
$(domObj).css('color', '#f00'); //注意$()里边不能使用引号
*使用jQuery查找元素
$('选择器')
(1)Basic(基本选择器)
#id .class div * s1,s2,s3
(2)Hierarchy(层级选择器)
parent> child parent child
prev + nextSibling prev ~ nextAllSibling
(3)Attribute(属性选择器)
[属性名] [属性名="值"]
[属性名^="值") [属性名$="值"]
(4)Form(表单元素选择器)
:text :password :radio :checkbox
:submit :reset :button :image
:hidden :file
(5)Basic Filter(基本过滤选择器)
:first :last :even :odd
:eq(i) :lt(i) LessThan :gt(i) GreaterThan
:not(selector)
(6)Child Filter(子元素过滤选择器)
:first-child :last-child
:nth-child(i/2 / odd / even / 3n+1)
:only-child
(7)Content Filter(内容过滤选择器)
:contains(txt)包含文本txt
:has(selector) 包含元素a
:empty 空元素不包含任何<hr>,<div></div>
:parent 身为父元素有内容<div>abcd</div>
(8)Visibility Filter(可见性过滤选择器)
:hidden 选中隐藏元素 :visible 选中可见元素
*操作元素的属性
DOM:
div.setAttribute('title', '新闻详情')
IE中:div.setAttributeNode('title', '新闻详情')
var value = div.getAttribute('title')
剩余12页未读,继续阅读
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展