回顾jQuery

WEB

在此是对实验楼的练习笔记的整理，有兴趣的小伙伴可以到实验楼这个非常棒的平台去练练～

看一段简单的代码段，回顾jQuery的使用方式
（内部的代码片段是截取了js部分，显示不同的功能）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#demo").css({'width':"100px", "height":"100px", "background-color":"red"})
			});

		</script>
	</head>

	<body>
		<div id="demo"></div>
	</body>
</html>

jQuery的常用属性

表单选择器

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

基本过滤选择器

:first
:last
:not(selector)
:odd 选取索引是奇数的元素
:even 选取索引是偶数
:eq(index) =
:gt(index) 大于
:lt(index) 小于
:header 选取标题元素
:animated 选取当前正在执行动画的元素
:focus 选取当前焦点的元素

内容过滤元素

:contains(text) 选取包含“text”的元素
:empty 选取不包含元素或文本的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素

可见性过滤器

:hidden 选取不可见元素
:visible 选取可见元素

属性过滤选择器

[attr] 拥有此属性的元素
[attr=value] 选取属性值为value的元素
[attr!=value]
[attr^=value] 属性值以value开始的元素
[attr$=value] 属性值以vlaue结束的元素
[attr*=value] 属性值含有value的元素

子元素过滤器

:first-child 选取第一个子元素
:last-child 选取最后一个子元素

表单对象属性过滤器

:enabled 选取所有可用元素
:disabled
:checked 选取所有被选中元素(单选框，复选框)
:selected 选取所有被选中的选项(下拉列表)

DOM与jQuery的相互转换

DOM => jQuery 

1
2
var domObj = document.getElementById('demo');
var jQueryObj = $(domObj);

jQuery => DOM

1
2
3
4
5
1.   var jQueryObj = $('#demo');
     var domObj = jQueryObj[0];

2.   var jQueryObj = $('#demo');
     var domObj = jQueryObj.get(0);

jQuery中的DOM操作

1. 创建节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
	$(document).ready(function(){
		var li_obj = $('<li>yellow</li>');
		$('ul').append(li_obj);
	});

</script>

<body>
	<ul>
		<li>blue</li>
		<li>white</li>
		<li>red</li>
	</ul>
</body>

2.插入节点

插入的方法
append() 向匹配的元素内部追加内容
appendTo() 将匹配的元素追加到指定的元素中
prepend() 向匹配的元素内部前置内容
prependTo() 将匹配的元素前置到指定的元素中
after() 将匹配的元素之后插入内容
insertAfter() 就爱那个匹配的元素插入到指定的元素后面
before() 在匹配的元素之前插入内容
insertBefore() 将匹配的元素插入到指定的元素的前面

3.删除节点

remove() 从DOM中删除所匹配的元素，可传参数，后代节点也被删除
detach() 从DOM中删除所匹配的元素，但绑定的事件，附加的数据等会保留下来
empty() 清空节点，清空元素的所有的后代元素节点

4.复制节点
复制节点可以通过clone()方法来实现，当clone()中传递了参数true，代表复制元素的同时复制其绑定的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
eg：点击li元素即可复制其本身到ul中
<script type="text/javascript">
	$("ul li").on('click', function(){
		$(this).clone().appendTo('ul');
	});
</script>

<body>
	<ul>
		<li>blue</li>
		<li>white</li>
		<li>red</li>
	</ul>
</body>

5.替换节点

repalceWith() 将匹配到的元素替换成指定的HTML或DOM元素
replaceAll() 颠倒了 replaceWith() 的操作

6.包裹节点

wrap() 将匹配的元素用其他结构化的标记包裹起来（单独包裹）
wrapAll() 将匹配的元素用一个结构化的标记包裹起来
wrapInner() 将匹配的元素的子内容用其他结构话的标记包裹起来

7.属性操作

用attr()方法获取和设置元素的属性，区别是参数的个数
eg: attr(“class”); —获取
attr(“class”, “demo”); —设置
removeAttr() 删除元素的属性

8.样式操作

addClass() 追加样式
removeClass() 移除样式

9.HTML, 文本和值

html()用来获取或设置所匹配元素中的HTML内容
text()用来获取或设置所匹配元素中的文本内容
val()用来设置和获取元素的值

10.遍历节点

children() 获取匹配元素的子元素集合
next() 获取匹配元素后面紧邻的同辈元素
prev() 获取匹配元素前面紧邻的同辈元素
siblings() 获取匹配元素前后所有的同辈元素
parent() 匹配元素的父级元素

11.CSS-DOM操作

css()获取或设置元素样式属性
hight(), width() 获取元素高，宽

事件和动画

事件

1.事件绑

bind() 对匹配元素进行特定的事件绑定
on() 对匹配元素进行一个或多个事件绑定
one() 对匹配元素进行一个只执行一次的事件处理函数绑定

事件类型：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mouseover, mouseout, keydown, keypress等，也可以为自定义名称。

1
2
3
4
5
eg:

$('ul li').bind('click', function(){
	$(this).clone().appendTo('ul');
});

2.简写绑定事件

1
2
3
$('ul li').click(function(){
	$(this).clone().appendTo('ul');
});

3.合成事件hover()
用于模拟光标悬停事件

1
2
3
4
5
$('ul li').hover(function(){
	$(this).css({"font-size":"24px"});
}, function(){
	$(this).css({"font-size":"14px"});
});

动画

1.show() 和 hide()
控制元素的显示和隐藏

2.animate()
用来实现自定义动画

1
$('.title').animate({left:"500px"}, 3000);

Ajax 应用

1.load()

1
2
3
4
5
载入远程HTML代码或记事本中的内容插入DOM中.

$('.loadData').load("test.html", function(responseText, textStatus, XMLHttpRequest){
	//返回的数据
});

2.$.get()

1
2
3
4
5
6
7
8
9
`使用GET方式来进行异步请求

$.get('get.py', {
	//此处是示例，是获取表单中的username, password的值
	username:$('#username').val(),
	password:$('#password').val()
}, function(data, textStatus){
	//返回的数据
});

3.$.post()

1
2
3
4
5
6
7
8
使用POST方式进行异步请求

$.post('post.py', {
	username:$('#username').val(),
	password:$('#password).val()
}, function(data,, textStatus){
	//返回的数据
});

4.$.getJSON()

1
2
3
4
5
用于加载JSON文件

$.getJSON('test.json', function(data){
	//返回的数据
});

5.$.ajax()

1
2
3
4
5
6
7
8
9
10
11
是jQuery最底层的Ajax实现，可以用它来替代之前所介绍的方法

eg: 替代$.post()
$.ajax({
	type:"POST",
	url:"post.py",
	dataType:"json",
	success:function(data){
		//返回的数据
	}
});

jQuery插件

1.自定义插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
eg：一个设置和获取元素背景色的插件（这里只是写了关键代码段）

<style>
	.one{
		background:black;
		height:100px;
		width:200px;
	}
</style>

<script>
//插件的编写
	(function($){
		jQuery.fn.extend({
			"background": function(value){
				if(value == undefined){
					return this.css("background");
				}else{
					return this.css("background",value);
				}
			}
		});
	})(jQuery);

//插件的使用
$(document).ready(function(){
	alert($('.one').background());
	//设置背景色:$('.one').background('red');
});
	
</script>

<body>
	<div class="one"></div>
</body>