WEB_BASIC---07jQuery概述、jQuery选择器、jQuery操作DOM

1.jQuery
(1)jQuery介绍
jQuery是一个js框架(jquery.js)，它的特点是利用选择器查找要操作的节点(dom对象)，然后将找到的节点封装成一个jQuery对象。通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。
这样做的好处是：代码有更好的兼容性，另外，代码也会更加简洁。
(2)jQuery对象与dom对象之间如何转换
1)dom对象 ---> jQuery对象
$(dom对象);
2)jQuery对象 ---> dom对象
方式一
$obj.get(0);
方式二
$obj.get()[0];
(3)选择器  select
1)基本选择器 
#id
.class
element
select1,select2..selectn
*
2)层次选择器  
select1 select2 考虑所有后代
select1>select2 只考虑子节点
select1+select2 下一个兄弟
select1~select2 下面所有兄弟
3)过滤选择器
A,基本过滤选择器  
:first
:last
:not(select)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
B,内容过滤选择器  
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(select) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
C,可见性过滤选择器
:hidden 匹配所有不可见元素，
或者type为hidden的元素
:visible 匹配所有的可见元素
D,属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
E,子元素过滤选择器 
:nth-child(index/even/odd)
注：下标从1开始
F,表单对象属性过滤选择器 
:enabled
:disabled
:checked
:selected
(4)表单选择器
:input   
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file

:hidden

2.dom操作  dom
(1)读取或者修改节点的html内容,文本内容,属性值,
value值。  
1)html()
2)text()
3)attr()
4)val()
(2)创建节点  
$(html)
(3)添加节点 
1)append():作为最后一个孩子添加
2)prepend():作为第一个孩子添加
3)before():作为上一个兄弟添加
4)after():作为下一个兄弟添加
(4)删除节点
1)remove()
2)empty()
(5)将html与js代码分离 
$(fn);
注: fn是一个函数(也可以是匿名函数)，当整个页
面加载完毕，会执行该函数。
(6)clone 
clone();
clone(true); 连同事件处理函数一块复制(即复制行为)
(7)属性操作
attr();读取或者修改属性
removeAttr();删除属性
(8)样式 
1)attr():设置style,class属性值
2)addClass():添加样式。参数必须是一个class选择器，可以
同时添加多个样式。
removeClass():删除样式。如果没有添加任何参数，
表示删除所有的class选择器。
3)toggleClass():切换样式。
4)hasClass():判断节点是否有该样式，有则返回true,
否则返回false。
5)css():直接添加样式。
css({'font-size':'60px','color':'red'});
(9)遍历 
1)children()/children(select):查找子节点。
2)parent():父节点。
3)prev()/prev(select):上一个兄弟
4)next()/next(select):下一个兄弟
5)siblings()/siblings(select):其它兄弟

6)find(select):查找后代

例子1：

	
	
1.引入jquery.js
	
2.使用选择器选中节点
	
3.调用它的API操作节点

例子2：

	
	
1.jQuery对象才能调用jQuery方法
	
2.dom对象才能调用dom方法/
	
3.jQuery对象本质上是dom数组
	
	

		
	

例子3：

	

		
北京
		
上海
		
广州
		
天津
		
深圳
		
杭州
	
	
	
	

		
		
	
	

		男
		女
	

例子4：

	
jQuery对DOM操作提供了支持
	

		
	
	

		
	
	

		
北京
		
上海
		
广州
		
深圳
		
天津