jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)

第一章 认识jQuery

jQuery代码风格 
$(document).ready(function(){
//...
}); 

简化 
$(function(){
//...
}); 

jQuery对象转DOM对象 
var $id = $("#id"); //jQuery对象
var id = $id[0]; //DOM对象 $id.get(0); 

DOM对象转jQuery对象 
var id = document.getElementById("id"); //DOM对象
var $id = $(id); //jQuery对象

　　

第二章 jQuery选择器

基本选择器 
$("*") 						//所有元素 
$("#lastname") 		//id="lastname" 的元素 
$(".intro") 			//所有 class="intro" 的元素 
$("p,span") 			//所有 <p> ,<span>元素　

层次选择器 
$("ancestor descendant") 		//$("div span")选取<div>里的所有<span>元素
$("parent > child") 				//$("div > span")选取<div>元素下元素名是<span>的子元素
$('prev + next') 						//$('.one + div')选取.one的下一个<div>元素
$('prev~sibilings')					//$('#two~div')选取#two的元素后面的所有<div>兄弟元素

基本过滤选择器 
:first 						//$("div:first")选取所有<div>元素中第一个<div>元素
:last 						//$("div:last")选取所有<div>元素中最后一个<div>元素
:not(selector) 		//$("input:not(.myClass)")选取class不是myClass的<input>元素
:even 						//$("input:even")选取索引是偶数的<input>元素 
:odd 							//$("input:odd")选取索引是奇数的<input>元素
:eq(index) 				//$("input:eq(1)")选取索引等于1的<input>元素
:gt(index) 				//$("input:gt(1)")选取索引大于1的<input>元素
:lt(index) 				//$("input:lt(1)")选取索引小于1的<input>元素
:header 					//$(":header")所有标题元素<h1> - <h6>
:animated 				//$("div:animated")选取所有执行动画的<div>元素

内容过滤选择器 
:contains(text) 			//$("div:contains('W3School')") 选取包含'W3School'的<div>元素
:empty 								//$("div:empty")选取无子（元素）节点的<div>元素
:has(selector) 				//$("div:has(p)")选取含有<p>元素的<div>元素
:parent 							//$("div:parent")选取拥有子元素的<div>元素

可见性过滤选择器 
:hidden 				//$("p:hidden") 所有隐藏的 <p> 元素
:visible 				//$("table:visible") 所有可见的表格

属性过滤选择器 
[attribute] 						//$("div[id]")选取拥有属性id的<div>元素
[attribute=value]				//$("div[title=test]")选取title="test"的<div>元素
[attribute!=value] 			//$("div[title!=test]")选取title不等于"test"的<div>元素
[attribute^=value] 			//$("div[title^=test]")选取title以"test"开始的<div>元素
[attribute$=value] 			//$("div[title^=test]")选取title以"test"结束的<div>元素
[attribute*=value] 			//$("div[title^=test]")选取title含有"test"的<div>元素

子元素过滤选择器
:nth-child 						//选取每个父元素下的第index个子元素或者奇偶元素
:first-child 					//$(“ul li:first-child”)选取的是每个<ul>中第1个<li>
:last-child 					//$(“ul li:last-child”)选取的是每个<ul>中最后1个<li>
:only-child 					//$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素 

表单对象属性过滤选择器 
$(":enabled") 			//所有激活的 input 元素
$(":disabled") 			//所有禁用的 input 元素
$(":selected") 			//所有被选取的 input 元素
$(":checked") 			//所有被选中的 input 元素　　

表单选择器 选取对应的所有元素 
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

选择器中的空格
$("div :hidden") //带空格的 选取<div>里的隐藏元素
$("div:hidden") //不带空格的 选取隐藏的<div>

　　

第三章 jQuery中的DOM操作

DOM操作分3方面 DOM Core ,HTML-DOM ,CSS-DOM
$(html)	//创建html代码


插入节点
append() //元素内部追加新元素
appendTo() //$(A)
.append(B)将A追加到B中 也可以用来移动元素
prepend() //元素前置内容
prependTo() //$(A).prependTo(B)将A前置到B中
after() //元素后面插入内容
insertAfter() //$(A).insertAfter(B)元素后面插入内容
before()	//元素前面插入内容
insertBefore() //$(A).insertBefore(B)元素前面插入内容

删除节点
remove()	//删除节点
empty() 	//清空节点里的内容

复制节点
clone() //true含义是复制元素的同时复制元素绑定的事件

替换节点
replaceWith()	//$("p").replaceWith("<strong>123</strong>");
replaceAll()	//$("<strong>123</strong>").replaceAll("p");

包裹节点
wrap()		//$("strong").wrap("<b></b>")	<b><strong></strong></b>
wrapAll()	//
wrapInner()	//$("strong").wrapInner("<b></b>")	<strong><b></b></strong>

属性操作
attr()			//添加修改属性	$("p").attr("属性","值")
removeAttr()	//删除属性

样式操作
addClass()		//追加样式
removeClass()	//移除样式
hasClass()		//判断是否含有样式 有true 没有false

切换样式
toggle()	//交替一组动作
$toggleBtn.toggle(function(){	
		//显示元素
	},function(){
		//隐藏代码
})

toggleClass()	//重复切换样式
$("p").toggleClass("class");

设置获取html 文本和值
html()	//获取或者修改元素的html代码
text()	//获取或者修改元素的内容
val()	//设置和获取元素的值 可以选中select checkbox radio
focus()	//获得焦点
blur()	//失去焦点

遍历节点
children()	//取得匹配元素的子元素集合
next()		//取得后面紧邻的同辈元素
prev()		//取得前面紧邻的同辈元素
siblings()	//前后的同辈元素
closest()	
find()
filter()
nextAll()
prevAll()
parent()
parents()

CSS-DOM操作
css()	
$("p").css("color")			//获取<p>元素的样式颜色
$("p").css("color","red")	//设置<p>元素的样式颜色
$("p").css({"fontSize":"12px" ,"color":"#999"})			//同时设置字体大小和颜色
height()
width()

offset()	//获取元素在当前视窗的相对偏移
var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

position()	//获取元素属性为relative或absolute的父节点的相对偏移
scrollTop()	//元素的滚动条距顶端的距离
scrollLeft()	//元素的滚动条距左侧的距离