码迷,mamicode.com
首页 > Web开发 > 详细

锋利的jQuery第2版学习笔记1~3章

时间:2016-03-31 21:38:22      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

第1章,认识jQuery

目前流行的JavaScript库

Prototype(http://www.prototypejs.org),成型早,面向对象的思想把握不到位,导致结构松散
Dojo(http://dojotoolkit.org),学习曲线陡,文档不全,最严重的是API不稳定
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")
可以使用next()方法代替$(‘prev+next‘)
$(".one+div");  ==> $(".one").next("div");
使用nextAll()代替$(‘#prev~sibling")
$("#prev~div"); ==> $("#prev").nextAll("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>元素
:nth-child()选择器功能如下:
1、:nth-child(even)选择索引是偶数的元素
2、:nth-child(2)选择索引是2的元素
3、:nth-child(3n+1)选择索引是(3n+1)的元素,n从1开始
表单对象属性过滤选择器
选择器 描述 返回 示例
: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-DOM

jQuery中的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>
这些方法不只能将新建节点插入到文档中,也能移动原有节点
4、删除节点
(1)remove方法
删除节点,及所有后代节点,并清除绑定的事件、附加的数据,返回被删除节点的引用,在之后可以继续使用
$("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第2版学习笔记1~3章

标签:

原文地址:http://www.cnblogs.com/TwinklingZ/p/5342775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!