锋利的jQuery第2版学习笔记1~3章
2016-03-31 21:05
796 查看
第1章,认识jQuery
注意:使用的jQuery版本为1.7.1
目前流行的JavaScript库
Prototype(http://www.prototypejs.org),成型早,面向对象的思想把握不到位,导致结构松散 Dojo(http://dojotoolkit.org),学习曲线陡,文档不全,最严重的是API不稳定 YUI(http://developer.yahoo.com/yui/) Ext JS(http://www.extjs.com),侧重界面,比较臃肿,用于商业用途需要付费 MooTools(http://mootools.net/) jQuery(http://jquery.com)jQuery优势
1、轻量级 2、强大的选择器 3、出色的DOM操作 4、可靠的事件处理机制 5、完善的Ajax 6、不污染顶级变量 7、出色的浏览器兼容性,支持IE6.0+、Firefox3.6+、Safari5.0+、Opera、Chrome 8、链式操作方式 9、隐式迭代 10、行为层与结构层的分离 11、丰富的插件支持 12、完善的文档 13、开源jQuery代码的编写
在jQuery库中,$就是就jQuery的一个简写形式,$("#foo")和jQuery("#foo")是等价的 规范: 1、对于同一个对象不超过3个操作的,可以直接写在一行 2、对于同一个对象的较多操作,建议每行写一个操作 3、对于多个对象的少量操作,可以每个对象写一行,涉及子元素的,可以考虑缩进 建议:jQuery对象使用$开头,例:var $variable = jQuery对象,var variable= DOM对象jQuery对象和DOM对象的相互转换
1、jQuery对象转成DOM对象 jQuery对象不能使用DOM中的方法,jQuery提供了两种方法将jQuery对象转成DOM对象,即使用[index]和get(index) (1)jQuery对象是一个类似数组的对象,可以通过[index]得到相应DOM对象var $cr = $("#cr"); //jQuery对象 var cr = $cr[0]; //DOM对象(2)通过get(index)得到
var $cr = $("#cr"); //jQuery对象 var cr = $cr.get(0); //DOM对象2、DOM对象转成jQuery对象 只需要使用$()将DOM对象包装起来即可得到jQuery对象
var cr = document.getElementById("cr"); //DOM对象 var $cr = $(cr); //jQuery对象注:DOM对象只能使用DOM方法,jQuery对象只能使用jQuery的方法 注:平时用到的jQuery对象都是通过$()函数制造出来的,$()就是一个jQuery对象制造工厂,也可以使用jQuery()函数,因为$和加jQuery等价
解决jQuery和其它库的冲突
注:默认情况下,jQuery用$作为自身的快捷方式 1、jQuery库在其他库之后导入 (1)在其他库和jQuery库加载完毕之后,可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交其他的JavaScript库 例:<!-- 引入prototype库 --> <script type="text/javascript" src="lib/prototype.js"></script> <!-- 引入jQuery库 --> <script type="text/javascript" src="lib/jQuery.js"></script> <script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>
(2)想确保jQuery不与其他库冲突,又想自定义快捷方式:
<script type="text/javascript"> var $j = jQuery.noConflict(); //自定义快捷方式 $j(function(){ //使用jQuery,利用自定义快捷方式 $j $j("p").click(function(){ alert.($j(this).text()); }); }); $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>(3)若不想自定义备用名称,又想使用$,还希望不冲突 <1>
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function($){ //使用jQuery设定页面加载时执行的函数 $("p").click(function(){ //函数内部继续使用$() alert.($(this).text()); }); }); $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>
<2>
<script type="text/javascript"> jQuery.noConflict(); //将变量$的控制权移交给prototype.js (function($){ //定义匿名函数 $(function(){ //匿名函数内部的$均为jQuery $("p").click(function(){ alert.($(this).text()); }); }); })(jQuery); //执行匿名函数且传递实参jQuery $('pp').style.display = 'none'; //使用prototype.js隐藏元素 </script>2、jQuery在其他库之前导入 直接使用jQuery而非$来做jQuery的工作,$()方法作为其他库的快捷方式,无需调用jQuery.noConflict()方法
第2章,jQuery选择器
jQuery选择器的优势
1、简洁的写法 使用$("#ID")代替document.getElementById(),使用$("tagName")代替document.getElementsByTagName()函数 2、支持CSS1到CSS3选择器 3、完善的处理机制,即,使用jQuery获取不存在的元素也不会报错 注:$("#tt")获取的永远是对象,即使网页上没有元素,因此当要使用jQuery检查某个元素在网页上是否存在,不能使用如下代码:if($("#tt")){ /* do something */ }
应根据获取的元素长度来判断:
if($("#tt").length > 0){ /* do something */ }
或转换成DOM对象:
if($("#tt")[0]){ /* do something */ }基本选择器
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定元素名匹配元素 | 集合元素 | $("p") |
* | 匹配所有元素 | 集合元素 | $("*") |
selector1,selector2... | 将每个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass") |
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")选取div里所有span元素 |
$("parent>child") | 与CSS的子选择器一样 | 集合元素 | $("div>span") |
$("prev+next") | 与CSS的相邻同胞选择器一样 | 集合元素 | $(".one+div") |
$("prev~sibling") | 与CSS的通用的同胞组合选择器一样 | 集合元素 | $("#two~div") |
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div:first")选取所有<div>元素中第1个<div>元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last")解释类似:first |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(.myClass)") |
:even | 选取索引是偶数的元素,索引从0开始 | 集合元素 | $("input:even") |
:odd | 选取索引是奇数的元素,索引从0开始 | 集合元素 | $("input:odd") |
:eq(index) | 选取索引是index的元素,index从0开始 | 单个元素 | $("input:eq(1)") |
:gt(index) | 选取索引大于index的元素,index从0开始 | 集合元素 | $("input:gt(1)") |
:lt(index) | 选取索引小于index的元素,index从0开始 | 集合元素 | $("input:lt(1)") |
:header | 选取所有标题元素,例h1,h2 | 集合元素 | $(":header") |
:animated | 选取正在执行动画的元素 | 集合元素 | $("div:animated") |
:focus | 选取获得焦点的元素 | 集合元素 | $(":focus") |
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $("div:contains('me')")选取所有含有文本"me"的div元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有p元素的div元素 |
:parent | 选取含有子元素或文本元素的元素 | 集合元素 | $("div:parent") |
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden")选取所有不可见元素 |
:visible | 选取所有可见元素 | 集合元素 | $("div:visible")选取可见的div元素 |
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选择拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的div元素 |
[attribute=value] | 选择拥有属性值为value的元素 | 集合元素 | $("div[title=test]") |
[attribute!=value] | 选择属性值不等于value的元素 | 集合元素 | $("div[title!=test]"),没有属性title的元素也会被选取 |
[attribute^=value] | 选择属性值以value开始的元素 | 集合元素 | $("div[title^=test]") |
[attribute$=value] | 选择属性值以value结束的元素 | 集合元素 | $("div[title$=test]") |
[attribute*=value] | 选择属性值含有value的元素 | 集合元素 | $("div[title*=test]") |
[attribute|=value] | 选择属性等于给定字符串或以该字符串为前缀(该字符串后 跟一个连字符‘-’)的元素 |
集合元素 | $("div[title|="en"]")选取title属性等于en 或以en为前缀的元素 |
[attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[title~="uk"]") |
[attribute1] [attribute2] ... |
用属性选择器合并成复合选择器,满足多个条件,缩小范围 | 集合元素 | $("div[id][title$="test"]")选取拥有属性 id并且属性title以"test"结束的div元素 |
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even /odd/equatioin) |
选取每个父元素下第index个子元素或奇偶元素, index从1开始 |
集合元素 | 将为每一个父元素匹配子元素 |
:first-child | 选取每个父元素的第一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:only-child | 若某个元素是其父元素唯一的子元素,则被匹配 | 集合元素 | $("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素 |
选择器 | 描述 | 返回 | 示例 |
:enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled") |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form1 :disabled") |
:checked | 选取所有被选中元素,单选,复选 | 集合元素 | $("input:checked") |
:selected | 选取所有被选中选项元素,下来列表 | 集合元素 | $("select option:selected") |
:input | 选取所有<input><textarea><select><button> | 集合元素 | $(":input") |
:text | 选取所有单行文本框 | 集合元素 | $(":text") |
:password | 选取所有密码框 | 集合元素 | $(":password") |
:radio | 选取所有单选框 | 集合元素 | $(":radio") |
:checkbox | 选取所有复选框 | 集合元素 | $(":checkbox") |
:submit | 选取所有提交按钮 | 集合元素 | $(":submit") |
:image | 选取所有图像按钮 | 集合元素 | $(":image") |
:reset | 选取重置按钮 | 集合元素 | $(":reset") |
:button | 选取所有按钮 | 集合元素 | $(":button") |
:file | 选取所有上传域 | 集合元素 | $(":file") |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
选择器中的注意事项
1、选择器中含有".","#","(","]"等特殊符号,需要转义,例:$("#id\\#b") 2、属性选择器中的@符号需要去掉第3章,jQuery中的DOM操作
DOM操作分类
1、DOM Core(核心) 2、HTML-DOM 3、CSS-DOMjQuery中的DOM操作
1、查找节点 (1)查找元素节点,使用选择器 (2)查找属性节点,再找到元素之后,可以使用attr()方法获取元素属性 2、创建节点 (1)创建元素节点 使用工厂函数$()来完成,$(html),根据传入的HTML标记字符串,创建一个DOM对象,并转成jQuery对象返回 例:$("<li></li>") (2)创建文本节点,与(1)类似,将文本内容一起包含在HTML标记字符串中 (3)创建属性节点,与(1)类似,将节点属性一起包含在HTML标记字符串中 3、插入节点方法 | 描述 | 示例 |
append() | 向每个匹配的元素内部追加内容 | <p>我想说:</p> $("p").append("<b>你好</b>"); <p>我想说:<b>你好</b></p> |
appendTo() | 将所有匹配元素追加到指定元素中,与append方法颠倒 | <p>我想说:</p> $("<b>你好</b>").appendTo("p"); <p>我想说:<b>你好</b></p> |
prepend() | 向每个元素内部前置内容 | <p>我想说:</p> $("p").prepend("<b>你好</b>"); <p><b>你好</b>我想说:</p> |
prependTo() | 将所有匹配元素前置到指定元素中,与prependTo方法颠倒 | <p>我想说:</p> $("p").prependTo("<b>你好</b>"); <p><b>你好</b>我想说:</p> |
after() | 在每个匹配元素之后插入内容 | <p>我想说:</p> $("p").after("<b>你好</b>"); <p>我想说:</p><b>你好</b> |
insertAfter() | 将所有匹配元素插入到指定元素之后 | <p>我想说:</p> $("<b>你好</b> ").insertAfter("p"); <p>我想说:</p><b>你好</b> |
before() | 在每个匹配的元素之前插入内容 | <p>我想说:</p> $("p").before("<b>你好</b>"); <b>你好</b> <p>我想说:</p> |
insertBefore() | 将所有匹配元素插入到指定元素之前 | <p>我想说:</p> $("<b>你好</b> ").insertBefore("p"); <b>你好</b> <p>我想说:</p> |
$("ul li:eq(1)").remove();也可以通过传递参数来选择性删除:
$("ul li").remove("li[title!=test]");(2)datach方法 与remove一样,但不会清除绑定的事件、附加的数据 (3)empty方法 并不能算是删除节点,而是清空节点,清空指定元素的所有后代节点 5、复制节点 使用clone方法,使用参数true可以同时复制元素所绑定事件 6、替换节点 replaceWith()和replaceAll()
$("p").replaceWith("<strong>hello</strong>"); $("<strong>hello</strong>").replaceAll("p");以上两句是一样的效果 注:元素绑定事件一样会被清掉 7、包裹节点 使用wrap()方法
<strong>hello</strong>
$("strong").wrap("<b></b>"); //用b标签把strong元素包裹起来
<b><strong>hello</strong></b>wrapAll()和wrapInner() (1)wrapAll 将所有匹配元素用一个元素来包裹,与wrap不同,wrap是将所有匹配元素单独包裹:
<strong>hello</strong> <strong>hello</strong>
$("strong").wrap("<b></b>");
<b><strong>hello</strong></b> <b><strong>hello</strong></b>而使用wrapAll之后:
<b> <strong>hello</strong> <strong>hello</strong> </b>注:若被包裹元素之间有其他元素,则其他元素会被放到包裹元素之后 (2)wrapInner方法 该方法将每一个匹配的元素的子内容用其他结构化标记包裹起来:
<strong>hello</strong>
$("strong").wrapInner("<b></b>");
<strong><b>hello</b></strong>8、属性操作 (1)获取和设置属性 使用attr()方法 获取属性
var $p = $("p"); var p_txt = $p.attr("title");设置属性
$("p").attr("title","value"); //用于设置单个属性 $("p").attr({"title":"you title","name":"you name"}); //用于设置多个属性,使用对象传递(2)删除属性 使用removeAttr()方法
$("p").removeAttr("title");9、样式操作 (1)获取和设置样式 使用attr()方法 (2)追加样式 使用addClass()方法
$("p").addClass("another");(3)移除样式 使用removeClass 参数为要移除的class名,不带参数则把所有class移除 (4)切换样式 toggle()方法
$toggleBtn.toggle(function(){ //代码1 },function(){ //代码2 });toggle的作用是,交替执行代码1和代码2,主要是用于控制行为上的重复切换 toggleClass()方法 用于控制样式上的切换,类名存在则删除,不存在则添加
$("p").toggleClass("another");(5)判断是否含有某个样式 hasClass()方法用于判断是否含有某个class,有返回true,没有返回false 10、设置和获取HTML、文本和值 (1)html()方法,可用于XHTML,不可用于XML 类似于JavaScript的innerHTML属性,可以用于获取和设置元素(传递参数)的HTML内容 (2)text()方法 类似于JavaScript的innerText属性,用于获取和设置元素(传递参数)的文本内容 (3)val()方法 类似于JavaScript的value属性,用于设置和获取元素的值,无论元素是文本框,下来列表还是单选框,都可以返回元素值,若为多选,返回一个包含所有选择的值的数组 11、遍历节点 (1)children()方法 取得匹配元素的子元素集合,只考虑子元素,不考虑后代元素,$("p").children(); (2)next()方法 用于取得匹配元素后面紧邻的同辈元素,$("p").next(); (3)prev()方法 用于取得匹配元素前面紧邻的同辈元素,$("p").prev(); (4)siblings()方法 用于取得匹配元素前后所有同辈元素,$("p").siblings(); (5)closest()方法 该方法用于取得最近的匹配元素。首先检查元素本身,接着逐级向上往祖先元素查找,没找到则返回空jQuery对象 (6)parent(),parents(),closest()区别 parent(),获取集合中每个匹配元素的父元素 parents(),获取集合中每个匹配元素的祖先元素 closese(),从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素 12、CSS-DOM操作 可以直接利用css()方法获取元素的样式属性:$("p").css("color"); 无论是外部CSS导入,还是直接拼接在HTML元素中,都可以通过css()方法获得 设置样式与attr()方法类似
$("p").css("color","red"); //设置单个 $("p").css({"color":"red","fontSize":"30px"); //设置多个注:如果值是数字,则自动转化为像素值 获取元素高度,可以直接使用height属性
$("p").height();注:1、jQuery1.2之后height可用于获取window和document的高度 2、css方法获取的高度值与样式设置有关,而height获取的是元素在页面实际高度,与样式设置无关,且不带单位 与height对应的还有width()方法 其他几个经常使用的方法: (1)offset()方法 用于获取元素在当前视窗的相对偏移,返回对象包含两个属性,top,left,只对可见元素有效 (2)position()方法 用于获取元素相对于最近一个position样式属性设置为relative或absolute的祖先节点的相对偏移,返回对象也包含连个属性top,left (3)scrollTop()方法和scrollLeft()方法 分别用于获取元素的滚动条距顶端和距左侧的距离,还可以接受一个参数,指定滚动条滚动到指定位置
相关文章推荐
- jQuery+css3侧边栏导航菜单
- Jquery ajax提交表单几种方法详解
- jQueryMobile(二)
- 【JQuery】:password表单密码选择器
- 【JQuery】:text表单文本选择器
- 获取浏览器的名称与版本信息
- 分享一个JQuery写的点击上下滚动的小例子
- 高效使用jQuery之选择器
- javascript中jQuery对象和dom对象
- 用jQuery—ui对表格进行修改数据
- 用Jquery做图片轮播
- JQuery选择器收藏
- jQuery.trigger() 函数详解
- jquery判断元素是否有某个属性
- jQuery的ajax()方法提交数组问题
- 从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)
- jquery中html()、text()、val()的区别
- jquery.validate form 基本使用
- 关于Jquery的笔记
- Jquery Plugin 初学