jQuery解析

jquery(一)

tips

1.入口函数

2.dom对象(js对象)与jq对象

3.$符号的实质

4.基本选择器

5.index()方法

代码

1.jq中的隔行换色

2.过滤选择器(隔行变色)

tips

1.入口函数

js的入口函数执行要比jquery的入口函数执行得晚一些。

jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载。

js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。

2.dom对象(js对象)与jq对象

1. 什么是dom对象(js对象):使用js的方式获取到的元素就是js对象(dom对象)

var cloth = document.getelementbyid("cloth");

cloth.style.backgroundcolor = "pink";

2. 什么是jq对象：使用jq的方式获取到的元素就是jq对象

var $li = $("li");

console.log($li);

$li.text("我改了内容");

3. jq对象与js对象的区别

js对象对象不能调用jq对象的方法

var cloth = document.getelementbyid("cloth");

cloth.text("呵呵");

4. jq对象与js对象的联系(jq对象其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象)(宏观上)

jquery对象能不能调用dom对象的方法

var $li = $("li");

$li[0].setattribute("name","hehe");

dom无法调用jquery对象的方法：为什么：因为是两个不同对象

dom对象调用jquery对象的方法。需要把dom对象转换成jquery对象。

var cloth = document.getelementbyid("cloth");

dom对象就变成jquery对象

$(cloth).text("呵呵");

jquery对象怎么转换成dom对象(取出来)

var $li = $("li");

$li[1].style.backgroundcolor = "red";

$li.get(2).style.backgroundcolor = "yellow";

3.$符号的实质

$其实就是一个函数，以后用$的时候，记得跟小括号 $()，等同于jquery();

参数不同，功能就不同

3种用法：

1. 参数是一个function, 入口函数

$(function () {

});

console.log(typeof $);

2. $(domobj) 把dom对象转换成jquery对象

$(document).ready(function () {

});

3. 参数是一个字符串,用来找对象

$("p") $("p ul") $(".current")

4.基本选择器

jquery中设置样式

css(name, value)

name:样式名 value：样式值

id选择器 $("#id")

$("#four").css("backgroundcolor", "red");

$(".green").css("backgroundcolor", "green");

$("li").css("color", "red");

交集 并集

$("#four,.green").css("backgroundcolor", "pink");

$("li.green").css("backgroundcolor", "red");

$(".green.yellow").css("backgroundcolor", "pink");

$("s1,s2")// 并集选择器

$("li.green")

$("s1s2") //交集选择器

子类选择器和后代选择器

$("s1 s2")// 后代选择器

$("s1>s2")// 子代选择器

$("#father>p").css("backgroundcolor", "red");

$("#father p").css("backgroundcolor", "red");

5.index()方法

index()会返回当前元素在所有兄弟元素里面的索引。

代码

1.jq中的隔行换色

2.过滤选择器(隔行变色)