笔记13
来源:互联网 发布:数据相关法律问题 编辑:程序博客网 时间:2024/05/16 01:36
认识jQuery
jQuery 的理念是:write less,do more。
jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。
1.jQuery优势
轻量级。压缩后可以保持在30kb左右。
强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
出色的DOM操作的封装。
可靠的事件处理机制。
完善的Ajax。
不污染顶级变量。jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。
2.使用jQuery
jQuery 库文件一般有生产版和开发版。区别在于生产版经过了压缩,只有30kb左右,我们下载使用开发版就可以了。
使用时,在页面引入 jquery.js 库文件就可以使用了。
<script type="text/javascript" src="js/jquery.js"></script>
简单编写jQuery:
$(document).ready(function(){alert('Hello jQuery');});
window.onload方法和$(document).ready()方法的区别。
window.onload
必须等待网页中所有内容加在完毕才能执行。$(document).ready()
是网页中所有DOM结构绘制完成后就执行,可能DOM元素关联的东西并没有加载。
链式风格
//等待dom元素加载完毕.$(document).ready(function(){$(".level1 > a").click(function(){$(this).addClass("current") //给当前元素添加"current"样式.next().show() //下一个元素显示.parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式.next().hide(); //它们的下一个元素隐藏return false;//事件处理阻止了默认的事件行为并停止了事件通过dom向上冒泡});
});
jQuery选择器
1.基本选择器
选择器 描述 #id根据给定的ID匹配一个元素.class根据给定的类名匹配元素element根据给定元素名匹配元素*匹配所有元素selector1,selector2,selector3将每一个选择器匹配到的元素合并返回2.层次选择器
选择器 描述 $('a d')选取a元素里所有的d后代元素$('p>c')选取p元素下的c子元素$('prev+next')选取紧邻在prev元素后的next元素$('prev~siblings')选取prev元素之后的所有siblings兄弟元素3.过滤选择器
选择器 描述 :first选取第一个元素:last选取最后一个元素:not(selector)去除所有与指定选择器匹配的元素:even选取所有索引是偶数的元素:odd选取所有索引是奇数的元素:containes(text)选取所有文本内容为'text'的元素:empty选取不包含子元素或者文本的空元素:has选取含有选择器所匹配的元素的父元素[attr]选取拥有此属性的元素[attr = value]选取属性值为value的元素[attr^=value]选取属性值以value开头的元素[attr$=value]选取属性值以value结束的元素[attr*=value]选取属性值含有value的元素:nth-child(index)选取父元素下第index个子元素或者奇偶元素:first-child选取父元素的第一个子元素:last-child选取每个父元素的最后一个子元素
阅读全文
0 0
- 笔记13
- AD学习笔记13
- Java学习笔记13
- Spring学习笔记13
- C#笔记13:迭代器
- 学习笔记-2011.01.13
- 每日学习笔记(13)
- 【9-13】C笔记
- Perl 学习笔记 --- 13
- 2012.4.13笔记
- c++笔记13
- 笔记2012/10/13
- 学习笔记10-13
- 11-13课堂笔记
- hibernate学习笔记13
- opencv 笔记13 Imgproc_Threshold
- 【笔记】13/7/15
- 【笔记】13/7/16
- NetComm-TCPServer
- 使用matlab对图像进行二值化和灰度化处理
- spark textFile 困惑与解释
- NetComm-TCPConnect
- 文章标题
- 笔记13
- J2EE的13个规范总结
- 以程序员专业的角度告诉你,头条推荐机制具体是怎么样的
- 面试宝典读书笔记
- PLSQL连接oracle数据库
- rapidjson
- Visual Studio 2013/2015/2017快捷键(转)
- 初识pyes(实现elasticsearch数据的插入)
- MYsql数据类型