JQuery学习笔记

JQuery的基础语法

基本语法形式：

$（selector）.action（）

$ 定义jQuery对象

selector获取HTML元素

action执行对元素的操作

基本选择器

语法	描述
$(this)	当前HTML元素
$("p")	所有p元素
$(".intro")	所有class=“intro”元素
$("#intro")	id=“intro”元素
$("ul li:first")	每个ul的第一个li
$("[href]")	选取带有href属性的元素
$("[href='#']")	选取带有href值等于的元素
$("href!='#'")	选取带有href值不等于的元素
$("href$='.jpg'")	选取带有href值以.jpg结尾的元素
$("p").css("background-color","red");	css选择器

jQuery 事件

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

JQuery查找

1、基本选择器

	#id 
	.class
	同CSS

2、层级选择器

	后代选择器子代选择器同CSS

3、兄弟关系

	$（"...").next/prev()
	紧邻的前一个或者后一个元素
	$("...").nextAll/prevAll0
	之前或者之后的所有元素
	$("...").siblings()
	除自己之外的所有兄弟

JQuery修改

HTML

	(1)获取
	$("...").attr("属性名")
	(2)修改
	$("...").attr("属性名",值)
	(3)html( "..."):读取或修改节点的HTML内容 
	(4)text("..." ):读取或修改节点的文本内容
	(5)val( ):读取或修改节点的value属性值

CSS

	(1)直接修改css属性
	获取css样式(计算后的样式)
	$("...").css("CSS属性名")
	修改css样式
	$("...").css("css属性名"，值)

	(2)通过修改class批量修改样式
	①判断是否包含指定class
	$("...").hasClass("类名")
	②添加class
	$("...").addClass("类名")
	③移除class 
	$("...").removeClass("类名")

JQuery添加&删除

	1、创建新元素
	var $new = $("html代码片段")
	2、将新元素结尾添加到DOM树
	$(parent).append($newelem)

	2、删除
	$("...").remove()

事件绑定

	语法：$("...").bind("事件类型" ，function(e){....}) 

	如： $("...").bind("click" ，function(e){....})

	简写形式 $("...").click(function(e){....})

事件对象

$("#btn").click(function(e)

{ console.log("hello"); })

这个对象中包含与事件相关的信息，也提供了可以影 响事件在DOM中传递进程的一些方法。