jQuery框架的学习笔记

jQuery是一个JavaScript的框架

jQuery的基本语法格式
1 选择器 - css选择器
2 事件 - js中的事件 例如:onclick
3 方法 - jQuery中封装的方法

语法格式:  		$(选择器).action()
action可以是事件，也可以是方法

修改HTML对象(HTML标签)的属性

attr()函数

在jQuery中提供了一个attr()函数
作用:获取或设置属性的值

格式:
$(选择器).attr(“属性名称”[,”属性值”]);

获取:
	
$(选择器).attr(“属性名称”);

设置:
$(选择器).attr(“属性名称”, “属性值”);

html()函数

作用:获取或设置对象的innerHTML属性的值
格式:$(选择器).html([“值”]);
获取:$(选择器).html();
设置:$(选择器).html(“值”);

text()函数

作用: 获取或设置对象的innerText属性的值

val()函数

作用: 获取或设置对象的value属性的值

使用json格式一次设置多个属性

格式:	$(选择器).attr(json对象)
保证:	json的key与html对象的属性一致
$("#img1").attr({"src":"imgs/Hokage.PNG", "alt":"三代目", "title":"火影老头"});

修改HTML对象的CSS样式

css()函数

作用:获取或设置对象的css样式属性的值

格式:
$(选择器).css(“属性名称”[,”属性值”]);

获取:
$(选择器).css(“属性名称”);

设置:
$(选择器).css(“属性名称”, “属性值”);

设置多个样式属性:
$(选择器).css({“样式属性1”:”值1”, “样式属性2”:”值2”, … , “样式属性N”:”值N”});

addClass()函数

设置样式的类选择器
格式:$(选择器).addClass(“CSS类选择器名称”);

.divCls{
	border:1px solid red;
	height:100px;
	background-color:#999999;
}

<link rel="stylesheet" type="text/css" href="css/style.css">

$("#btn1").click(function(){
	$("#div1").addClass("divCls");
});

选择器

选择器的作用:在HTML页面上找到对应的元素

ID选择器

$(“#id属性的值”)  按照HTML元素的id属性查找元素

class选择器

$(“.class属性的值”)  按照HTML元素的class属性查找元素

HTML选择器

$(“HTML标签名”)   按照HTML元素的名称查找元素

选择器

$(“*”)  选取所有HTML页面元素

并列选择器

$(“s1, s2, … ,SN”)  满足其中任意一种的都可

后代选择器

$(“s1 s2”)  在选择器1对应的元素中，所有选择器2的元素

子元素

$(“s1>s2”)  在选择器1对应的元素中，所有选择器2的子一级元素

下一个选择器

$(“s1+s2”)  与选择器1平级的紧挨着的下一个选择器2的元素

兄弟选择器

$(“s1~s2”)  选择器1的选择器2兄弟元素

控制表格奇偶行的颜色

$("tr:even")：选取偶数位置的 <tr> 元素，注意下标从0开始；

$("tr:odd")：选取奇数位置的<tr>元素，注意下标从0开始。