jQuery基础(实用部分)整理

jQuery基础(实用部分)整理

[TOC]

1.选择器

1-1基础选择器

1. ID选择器$(“#id”)
2. 标签选择器$(“input”)
3. 类选择器$(“.test”)
4. 通配符选择器$(“*”)
5. 组选择器(“#id,input,.test”)
6. …

1-2层级选择器

1. 包含选择器$(“div input”)
2. 子类选择器$(“div > input”)
3. 相邻选择器$(“input+button”) input后面的一个button生效
4. 兄弟选择器$(“input~button”) input后面的同级都生效

1-3属性选择器

属性选择器$(“input[value=’小黑’]”)

1-4伪类选择器

1. $(“p:first”) 第一个p标签
2. $(“p:last”) 最后一个p标签
3. $(“p:eq(0)”) 第0个下标的p标签
4. $(“p:even”) 偶数行的p标签
5. $(“p:odd”) 奇数行的p标签
6. …(很多)

2.jQuery元素操作

var aa=$(“#aaa”); 值/属性/样式

• aa.val() 获得aa的value属性值
• aa.val(“aaaaa”) 设置aa的value值
• aa.attr(“xxx”) 获取aa的xxx属性的值
• aa.attr(“xxx”,”yyy”) 设置aa的xxx属性的值为yyy
• aa.removeAttr(“xxx”) 移除aa的xxx属性
• aa.css(“xxx”) 读取css样式xxx
• aa.css(“xxx”,”red”) 设置css样式xxx
• aa.css(“xxx”,””) 清空css样式xxx

var bb=$(“#bbb”);标签文本/纯文本

• bb.html() 获得bb的子节点内容
• bb.html(“bbbbb“) 设置bb的子节点内容
• bb.text() 获取bb内纯文本内容
• bb.text(“bobobobo”) 设置bb内纯文本内容

var cc=$(“#ccc”);class的操作

• cc.addClass(“ccc”) 设置cc的class为ccc
• cc.removeClass(“ccc”) 移除cc的class,ccc
• cc.hasClass(“ccc”) 判断cc是否拥有ccc这个Class

cc.remove() 移除cc元素

cc.is(“cc”)判断是否有cc这个选择器型??

before prepend append after 追加位置

3.jQuery动画

隐藏显示

​ hide() show()

淡入淡出

​ fadeIn() fadeOut()

纵向显示消失

​ slideDown() slideUp()

开关显示隐藏

​ toggle()

4.事件

1. click :点击事件
2. dbclick:双击事件
3. mouseover:鼠标移入
4. mouseleave:鼠标移出
5. change:输入改变
6. keydown:键盘按下
7. keyup:键盘弹起
8. focus:获得焦点
9. blur:失去焦点

5.jQuery和Dom转换

dom转jQuery $(dom)

jQuery转dom $(jquery).get(0) 或者$(jquery)[0]

注意:jQuery中没有null,如果不存在,则显示长度为0的Object;;dom中如果不存在,则显示null

6.工具

6-1 each遍历

$(function(){
		//index 是当前元素的索引
		//obj是dom对象
		$("input").each(function(index,obj){
		
			$(obj).bind('click',function(){
				//当前节点的指定祖父节点中,find寻找td子类,
				//该td子类指定伪类选择器为eq即第1个td,
				//结合子类选择器,找第一个td中的子类a即可
				//var a= $(this).parents("tr").find("td:eq(0)>a");

				var td= $(this).parents("tr").find("td:eq(0)");
				var te=$("td>a").text();
				var res="<input type='text' value='"+te+"'/>";
				td.html(res);
			})
		})
	})