Jquery

·Jquery

引入jquery,可以是本地的可以是在线的

注：如果script标签设置了src属性，则在script双标签中写的js代码无效。

·DOM对象与Jquery的互相转换

1、将DOM对象转换为Jquery包装集对象：  $(dom对象)
2、jquery对象转换为dom对象
	  1）、将jquery中each()函数，会将遍历的jquery对象变成dom对象
	  2）、Jquery中的each()函数，会将遍历的jquery对象变成DOM对象
	  	each(function):
	  		语法：
	  			jquery对象.each(function([当前下标，当前被遍历到的元素]){
	  				
	  			});
	  	this:谁调用函数，this指向谁
	  3）、取下标，$().get(index) 、 $()[index]
3、注意：1）通过原生js获取节点，如果节点不存在，返回null
				2）如果通过Jquery获取节点，如果节点不存在，返回空包装集对象。所以判断jquery对象是否存在需要使用

·基础选择器

id选择器		$("#id属性值")	选择id为指定值的元素（如果有多个同名id，只会获取第一个）
类选择器		$(".classs属性值")	选择所有class属性为指定值的元素
元素选择器	$("元素名/标签名")	选择指定标签的元素

选择所有选择器	$("*")		选择所有标签的元素
组合选择器		$("选择器1，选择器2。。。") 选择器指定选择器选中的元素

·层次选择器

后代选择器		ncestor descendant		空格隔开
子代选择器		parent>child			大于号
相邻选择器		prev+next				加号	      往下找，只找一个，且该元素必须和选择器相邻
同辈选择器	 prev~sibing				波浪号		往下找，找到所有同辈的指定元素

·其它选择器

表单选择器
$(":radio")			选择所有单选框按钮
$(":checkbox")		选择所有复选框按钮

过滤选择器
$(":checked")		选择所有选中状态的元素(单选框和复选框)
$(":checkbox:checked")	选择所有复选框被选中的元素
$(":checkbox:checked:eq(index)")
$(":checkbox:checked").eq(index)		匹配被选中的复选框的指定索引的元素	
$(":checked:gt(index)")		选择下标大于指定值的元素
$(":odd")				选择所有的奇数下标的元素
$(":even")			选择所有的偶数下标的元素

属性选择器
$("[属性名]")		$("[name]")		选择所有设置过name属性值的元素
$("[属性名=属性值]")		$("[id='myId']")		选择所有属性名等于指定属性值得元素

·操作元素的属性

获取属性

方法							说明							举例
attr(属性名称)		获取指定的属性，操作checkbox时选中返回  checked，没有选中返回undefined
attr('checked')	 、	attr('name')
prop(属性名称)		获取具有true和false两个属性的属性值
prop('checked')	

removeAttr("属性名");	---->移除属性

注：

1、固有属性：attr()和prop()都可使用
2、自定义属性：attr()可用	,prop()不可用
3、返回值是Boolean的属性：
			attr():如果设置过，则返回具体值，若未设置过，返回undefined
			prop()：返回true和false
	返回值是boolean类型的属性：
			checked、selected、disabled（禁用）

总结：返回值是boolean类型的属性，使用prop();其他属性使用attr()

·操作元素的样式：

方法						说明		
attr("class")			获取class属性的值，即样式名称
attr("class","样式名")	修改class属性的值，修改样式		注：会覆盖原本的class属性，重新赋值
addClass("样式名")		添加样式名称		注：添加样式，原本的样式保留，如果出现相同的样式名，则*以样式后定义的为准*
css()					添加具体的样式			注：添加具体的样式名，相当于写在style属性中的样式，样式会叠加，优先级最高。

·操作元素的内容

方法					说明
html()				获取元素的html内容
html("html 内容")	设定元素的html内容
text()				获取元素的文本内容，不包含html
text("text 内容")	设置元素的文本内容，不包含html
val()				获取元素的value值
val('值')				设定元素的value值

·添加元素

方法								说明
prepend(content)				在别选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、html元素标记。
$(content).prependTo(selector)	把content元素或内容加入selector元素开肉
append(content)					在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)   把 content 元素或内容插入 selector 元素内，默认是在尾部
before() 						在元素前插入指定的元素或内容:$(selector).before(content)
after() 						在元素后插入指定的元素或内容:$(selector).after(content)

·删除元素

方法			说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()		清空所选的元素的内容

·遍历元素
each()
$(selector).each(function(index,element){}) 遍历元素
参数function为遍历时的回调函数
index为遍历元素的序列号，从0开始
element是当前的元素，此时是DOM元素

·ready加载事件

onload事件与ready事件的区别：
		当DOM结构加载完毕后，ready事件就执行；
		当DOM结构加载完毕，并且引入的外部文件加载完毕，onload事件才会执行
ready事件可以同时写多个，按顺序执行
		语法：$(document).ready(function(){});
		缩写版：$(function(){})

·bind()绑定元素事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
	$(selector).bind(evenType [, eventData], handler(eventObject))
	eventType:是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可以包括如下：
		blur, focus, focusin, focusout, load, resize, scroll, unload, click, 
		dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, 
		mouseleave,change, select, submit, keydown, keypress, keyup, error 。
		[, eventData]：传递的参数，格式：{名:值,名 2:值 2}
		handler(eventObject)：该事件触发执行的函数