11.20课堂笔记-jQuery基础、jQuery对象和DOM对象、jQuery选择器
2017-11-20 16:55
651 查看
jQuery 的理念是:write less,do more。
jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。
强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
出色的DOM操作的封装。
可靠的事件处理机制。
完善的Ajax。
不污染顶级变量。jQuery只建立一个名为jQuery的对象,其所有的函数方法都在这个对象之下。
使用时,在页面引入 jquery.js 库文件就可以使用了。
简单编写jQuery:
window.onload方法和$(document).ready()方法的区别。
window.onload必须等待网页中所有内容加在完毕才能执行。
$(document).ready()是网页中所有DOM结构绘制完成后就执行,可能DOM元素关联的东西并没有加载。
链式风格
//等待dom元素加载完毕.
jQuery对象和DOM对象
1.jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。拥有jQuery里面的方法。
例如:
jQuery对象中无法使用DOM对象的任何方法。
DOM对象也不能使用jQuery里面的方法。
2.JQuery对象和DOM对象的相互转换。
jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。
//第一种方法
//第二种方法
DOM对象转化成jQuery对象。
只需要把DOM对象包装起来,既可以获得一个jQuery对象了。
2.层次选择器
3.过滤选择器
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对象和DOM对象
1.jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。拥有jQuery里面的方法。
例如:
lg($('#dd')); lg(document.getElementById('dd'));
jQuery对象中无法使用DOM对象的任何方法。
DOM对象也不能使用jQuery里面的方法。
2.JQuery对象和DOM对象的相互转换。
jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get(index)。
//第一种方法
lg($('#dd')); lg($('#dd')[0]);
//第二种方法
lg($('#dd')); lg($('#dd').get(0));
DOM对象转化成jQuery对象。
只需要把DOM对象包装起来,既可以获得一个jQuery对象了。
var dd = document.getElementById('dd'); var $dd = $(dd); lg($dd);
jQuery选择器
1.基本选择器选择器 | 描述 |
---|---|
id | 根据给定的ID匹配一个元素 |
.class | 根据给定的类名匹配元素 |
element | 根据给定元素名匹配元素 |
* | 匹配所有元素 |
selector1,selector2,selector3 | 将每一个选择器匹配到的元素合并返回 |
选择器 | 描述 |
---|---|
$(‘a d’) | 选取a元素里所有的d后代元素 |
$(‘p>c’) | 选取p元素下的c子元素 |
$(‘prev+next’) | 选取紧邻在prev元素后的next元素 |
$(‘prev~siblings’) | 选取prev元素之后的所有siblings兄弟元素 |
选择器 | 描述 |
---|---|
: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 | 选取每个父元素的最后一个子元素 |
相关文章推荐
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
- jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)
- JQuery 选择器、过滤器及JQ对象和DOM对象的互相转换
- JQuery随心笔记----JQuery对象和DOM对象的相互转换
- jQuery学习笔记之DOM对象和jQuery对象
- jquery学习笔记— jQuery对象和DOM对象
- 前端学习笔记-jquery-3-jquery对象与dom对象互相转换
- jquery 之 搞清楚一些基础概念 DOM对象和JQuery对象的区别
- jQuery学习笔记之DOM对象和jQuery对象
- 【知了堂学习笔记】_jQuery基础知识之选择器(一)
- JQuery学习笔记---jquery对象和DOM对象的关系
- 简谈jQuery选择器的第二个参数Context对象以及jQuery对象转换成DOM对象的方法
- 【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用!
- jQuery学习笔记--DOM对象和jQuery对象
- jQuery学习笔记—jQuery对象和dom对象相互转化
- jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器
- jquery对象和DOM对象,各类选择器
- JavaScript学习笔记8-jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
- jquery 字符串转dom对象及对该对象使用选择器查询
- jQuery基础教程之强大的选择器(过滤选择器-表单对象属性过滤选择器)