jquery
第一部分:核心:函数和对象访问
一丶页面加载函数
代码:
//最原始最麻烦的写法
jQuery(document).ready(function(){
});
//简写方式(开发中常用)
$(function(){});
二丶JQ与JS页面加载的区别
1.JS页面加载存在覆盖问题,加载速度比JQ慢(除了要加载整个页面还得加载与之相关资源)
2.JQ页面加载不存在覆盖问题,按照书写顺序依次执行,加载速度比JS块(当整个文档绘制完毕后就执行)
三丶JQ对象与DOM对象之间的转换
1.JQ向DOM转换 (可能忘记了JQ里面的方法但是记得DOM的操作)
方式一:$(element).get(index,一般都是0)
方式二:$(element)[0]
2.DOM向JQ转换 (使用$()将DOM对象包裹起来)
$(DOM对象)
注意:JQ和DOM对象不能互相使用对方的属性和方法!
四丶遍历
在对象访问中的遍历:
$(DOM对象).each(function(i,n){
})
其中,i代表角标,n代表被遍历后的每一个元素
DOM对象,被遍历的对象。
JQ工具类中的遍历方式:
$.each(被遍历的对象,function(i,n){
});
第二部分选择器
一丶基本选择器
①id选择器
$("#id名称")
②类选择器
$(".class名称")
③元素选择器
$("input")
④通配符 *
$("*")
⑤多个选择器同时作用(并集)
注意,多个选择器之间使用逗号(,)分开
$("body,form,input")
二丶层级选择器
①ancestor descendant :在给定的祖先元素下匹配所有的后代元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
②parent > child:在给定的父元素下匹配所有的子元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form > input")
结果:
[ <input name="name" /> ]
③A + B:匹配所有紧接在 A 元素后的 B 元素,寻找A下面的所有包含B元素的内容(下一个同桌)
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("label + input")
结果:
[ <input name="name" />, <input name="newsletter" /> ]
④A~ B:匹配 A 元素之后的所有 B 元素,寻找A下面的所有包含B元素的内容(兄弟元素)
三丶基本过滤选择器
过滤选择器都有一个共同的特性(前面都有冒号:)
①:first
first()获取第一个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li').first()
[ <li>list item 1</li> ]
②:last
last()获取最后个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$('li').last()
[ <li>list item 5</li> ]
③:even
匹配所有索引值为偶数的元素,从 0 开始计数
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:even")
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
④:odd
匹配所有索引值为奇数的元素,从 0 开始计数
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:odd")
结果:
[ <tr><td>Value 1</td></tr> ]
⑤:lt
匹配所有小于给定索引值的元素
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:lt(2)")
结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
⑥:gt
匹配所有大于给定索引值的元素
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:gt(0)")
结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
⑦:not
去除所有与给定选择器匹配的元素
HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />
jQuery 代码:
$("input:not(:checked)")
结果:
[ <input name="apple" /> ]
⑧:eq
匹配一个给定索引值的元素
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$("tr:eq(1)")
结果:
[ <tr><td>Value 1</td></tr> ]
⑨:header
匹配如 h1, h2, h3之类的标题元素
HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery 代码:
$(":header").css("background", "#FFF");
[ <h1 style="background:#FFF;">Header 1</h1>, <h2 style="background:#FFF;">Header 2</h2> ]
⑩:animated
匹配所有正在执行动画效果的元素
HTML 代码:
<button id="run">Run</button><div></div>
jQuery 代码:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
四丶属性选择器
写法:
其它选择器[属性名=’属性值’]
注意手册里面的attr的写法
①[attribute]
匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]
②[attribute=value]
匹配给定的属性是某个特定值的元素
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:
$("div[id]")
结果:
[ <div id="test2"></div> ]
③[attribute!=value]
匹配所有不含有指定的属性,或者属性不等于特定值的元素。
此选择器等价于:not([attr=value])
要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
④[attribute^=value]
匹配给定的属性是以某些值开始的元素
⑤[attribute$=value]
匹配给定的属性是以某些值结尾的元素
⑥[attribute*=value]
匹配给定的属性是以包含某些值的元素
⑦[selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。
HTML 代码:
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
jQuery 代码:
$("input[id][name$='man']")
结果:
[ <input id="letterman" name="new-letterman" /> ]
五丶表单选择器
①:input
匹配所有 input, textarea, select 和 button 元素
HTML 代码:
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
jQuery 代码:
$(":input")
[
<input type="button" value="Input Button"/>,
<input type="checkbox" />,
<input type="file" />,
<input type="hidden" />,
<input type="image" />,
<input type="password" />,
<input type="radio" />,
<input type="reset" />,
<input type="submit" />,
<input type="text" />,
<select><option>Option</option></select>,
<textarea></textarea>,
<button>Button</button>,
]
②:text
匹配所有的单行文本框
HTML 代码:
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
jQuery 代码:
$(":text")
结果:
[ <input type="text" /> ]
③:checked
匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
HTML 代码:
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
jQuery 代码:
$("input:checked")
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]
④:selected
匹配所有选中的option元素
HTML 代码:
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
$("select option:selected")
结果:
[ <option value="2" selected="selected">Gardens</option> ]
……
第三部分:属性操作
如果有一个方法它有多个重载的方法,此时存在一个规律:
如果这个方法最少没有参数,那么无参表示获取操作 比如val()
如果这个方法最少没有参数,那么有1个参数表示设置操作val(“aaa”)
如果这个方法最少有1个参数,那么有1个参数表示获取操attr("src")
如果这个方法最少有1个参数,那么有2个参数表示设置操attr("src","http://www.baidu.com")
一丶属性
①attr(name)
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("src");
结果:
test.jpg
②attr(name,value)
为所有匹配的元素设置一个属性值。
HTML 代码:
<img/>
<img/>
jQuery 代码:
$("img").attr("src","test.jpg");
结果:
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]
③attr(properties)
将一个“名/值”形式的对象设置为所有匹配元素的属性。
通俗的讲究是为一个元素标签设置多个属性值.
这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用’className’ 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
HTML 代码:
<img/>
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:
[ <img src= "test.jpg" alt:="Test Image" /> ]
④removeAttr(name)
从每一个匹配的元素中删除一个属性
将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:
[ <img /> ]
⑤attr(key, function(index, attr))
为所有匹配的元素设置一个计算的属性值。
不提供值,而是提供一个函数,由这个函数计算的值作为属性值。
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").attr("title", function() { return this.src });
结果:
<img src="test.jpg" title="test.jpg" />
二丶CSS类
①addClass(class属性值)
一般开发的时候CSS样式都是由别人(美工妹子)写好的,我们只需要调用此方法即可,完成添加新的样式
为每个匹配的元素添加指定的类名。
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
②removeClass(class属性值)
从所有匹配的元素中删除全部或者指定的类。
从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass("selected");
结果:
[ <p class="first">Hello</p> ]
③toggleClass(class属性值)
如果存在(不存在)就删除(添加)一个类。
为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
三丶html/text/val
①html()
获取html里面的内容,它包含html标签
②html(val)
设置一个内容
③text()
获取文本值,不包含html标签
④text(val)
设置文本的值
⑤val()
获取标签中value属性的值
⑥val(val)
给标签中value属性设置值
第四部分:CSS操作
一丶CSS
①css(name)
获取指定名称为name的样式
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
②css(name,value)
设置属性名为name的value值样式
将所有段落字体设为红色
jQuery 代码:
$("p").css("color","red");
③css(properties)
设置多个CSS样式
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });
二丶位置
……
三丶尺寸
……
第五部分:文档处理
一丶内部插入
①append()
A.append(B):将B插入到A的内部的末尾处 (进行的是剪切操作)
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]
②appendTo()
A.appendTo(B):将A插入到B的内部的末尾处 (进行的是剪切操作)
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
③prepend()
A.prepend(B):将B插入到A的内部的开头处 (进行的是剪切操作)
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]
④prependTo()
A.prependTo(B):将A插入到B的内部的开头 (进行的是剪切操作)
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>
二丶外部插入
①after()
A.after(B):将B插入到A的外部的后面 (进行的是剪切操作)
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
②before()
A.before(B):将B插入到A的外部的前面 (进行的是剪切操作)
③insertBefore()
A.insertBefore(B) 将A添加到B的前面(外面
④insertAfter()
A.insertAfter(B) 将A加入B的后面(外部)
三丶复制
①clone()
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
②clone(true)
如果里面有参数true,那么表示复制过去的内容也与原内容具有相同的事件(请参考相关代码)
四丶删除
①empty()
删除所有的子节点,不包括自己
把所有段落的子元素(包括文本节点)删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
②remove
删除所有子节点,包括自己,同时删除事件
③detach()
删除所有子节点,包括自己 ,将事件保留
五丶替换
①replaceWith()
将所有匹配的元素替换成指定的HTML或DOM元素。
把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
用第一段替换第三段,你可以发现他是移动到目标位置来替换,而不是复制一份来替换。
HTML 代码:
<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
jQuery 代码:
$('.third').replaceWith($('.first'));
结果:
<div class="container">
<div class="inner second">And</div>
<div class="inner first">Hello</div>
</div>
②replaceAll()
用匹配的元素替换掉所有 selector匹配到的元素。
六丶包裹
第六部分:效果和事件
一丶效果
①显示:show()
显示隐藏的匹配元素。
显示所有段落
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show()
②隐藏:hide()
隐藏显示的元素
隐藏所有段落
jQuery 代码:
$("p").hide()
③淡入:fadeIn()
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
用600毫秒缓慢的将段落淡入
jQuery 代码:
$("p").fadeIn("slow");
用200毫秒快速将段落淡入,之后弹出一个对话框
jQuery 代码:
$("p").fadeIn("fast",function(){
alert("Animation Done.");
});
④淡出:fadeOut()
通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
用600毫秒缓慢的将段落淡出
jQuery 代码:
$("p").fadeOut("slow");
用200毫秒快速将段落淡出,之后弹出一个对话框
jQuery 代码:
$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
⑤滑入:slideDown()
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
用600毫秒缓慢的将段落滑下
jQuery 代码:
$("p").slideDown("slow");
用200毫秒快速将段落滑下,之后弹出一个对话框
jQuery 代码:
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
⑥滑出:slideUp()
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
用600毫秒缓慢的将段落滑上
jQuery 代码:
$("p").slideUp("slow");
用200毫秒快速将段落滑上,之后弹出一个对话框
jQuery 代码:
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
二丶事件
①页面加载
问题引入:
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已经加载完毕 !");
}
/*
执行错误,为什么?
因为dom还未加载完毕。
*/
</script>
解决办法:
方式一:将整个JS代码放到Body后面
方式二:将整个JS代码放到页面加载函数里面
②事件绑定
绑定方式:
$("#img").bind('click',function(){
});
③事件移除
解绑方式:
$('#btn').unbind("click");
④事件合成
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
单独学习这些选择器比较简单,重点掌握多个种选择器进行组合获取元素,如果还没有找到,那么可以借助筛选里面的方法(过滤和查找)进行查找!
选择器这块旨在缩小查到范围,再结合筛选里面的方法可以精确找到需要操作的元素!