jQuery基础使用与样式篇

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：陈锦通
撰写时间：2020年4月21日

1. 如何使用jQuery
   要使用jQuery就要引用jQuery插件。如果没有引用你在打jq代码时会出现报错，记住非常重要。
2. jQuery选择器
   jQuery几乎支持css到css3的主流选择器的写法

1. ID选择器：

Js中的为document.getElementById();
Jq中的为$("#id");

2. 类选择器：（class选择器）

Js中的为getElementsByClassName();
Jq中的为$(".classname");

3. 根据标签名获取标签

Js中的为getElementsByTagName();
Jq中的为$("div");

4. 全选择器

Css中的为*{}
Jq中的为$("*");

5. 层级选择器

Css中的为
	(1) 后代选择器div div{}
	(2) 子选择器.div>span{}
	(3) 相邻兄弟选择器.div+div
	(4) 一般兄弟选择器li ~li
Jq中的为
	(1) 后代选择器$(".div div") 
	(2) 子选择器$(".div>span")
	(3) 相邻兄弟选择器$("#div+div") 
	(4) 一般兄弟选择器$("#div~div")

6. 获取匹配第一个、最后一个元素

$("li:first");匹配第一个 $("li:last");匹配最后一个

7. 匹配所有索引值为偶数、奇数的元素

$("li:even");匹配为偶数的元素 $("li:odd");匹配为奇数的元素

8. 匹配如 h1, h2, h3之类的标题元素

$(":header");

9. 匹配当前获取焦点的元素

$("input:focus");

10. 选择该文档的根元素

$("body:root")body的根元素是htmml

11. 匹配有这个属性的元素

$("[type]");匹配有type属性的元素 $("input[type='text']"); 匹配input有type属性等于text的元素

3. jQuery样式操作
   js通过获取DOM元素上的style属性，可以动态的给元素赋予样式属性。在jq中可以使用css()方法实现
   a) $(element).css(“属性名”); //获取匹配元素集合中的第一个元素的样式属性的计算值

$(".box").css("width","500px");

b) $(element).css([“属性名1”,“属性名2”]) //传递一个数组，返回一个对象结果

var a = $(".div").css(["width","height","backgroundColor","color"]);
console.log(a);输出的结果是.div的style的值

c) $(element).css({“属性1”:“属性值1”,“属性2”:“属性值2”}) //可以传一个对象，同时设置多个样式

$("#div").css({"width":"50px","height":"50px","backgroundColor": "#FC6D70","color":"#000"});

d) $(element).css({属性名:function(index,value)}) //可以传入一个回调函数，返回取到对应的值进行处理

$(".div").css({
width:function(index,value){
	return parseFloat(value)*2; 
},
height:function(index,value){
	return parseFloat(value)*3;
}
});

4. jQuery获取或设置元素的宽度，高度

$(element).width() 获取或设置元素的宽度；
    $(element).height() 获取或设置元素的高度；
	$("#div").width()获取宽度 ("#div").width("200px");设置宽度
	$("#div").width()获取高度 ("#div").width("200px");设置高度