jQuery的初体验

刚开始学习前端,老是坚持不住,这里立个flag,争取每天写一篇博客,记录当天所学,希望自己能坚持下去

jQuery对象  跟 DOM对象的区别

两者可以相互转换,jQuery对象不能调用DOM的方法,DOM对象不能调用jQuery的方法

jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)
//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";

// DOM--> jQuery  $()
// jQuery--》 DOM  $li[0]  $li.get(0)

关于jQuery的入口函数:

//第一种写法
$(document).ready(function() {

});
//第二种写法
$(function() {

});

jQuery入口函数与js入口函数的对比

1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

基本选择器

名称 用法 描述
ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。
交集选择器 $(“div.redClass”); 获取class为redClass的div元素

层级选择器

名称 用法 描述
子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

过滤选择器

这类选择器都带冒号:

名称 用法 描述
:eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素
:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中,选择索引号为偶数的元素

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

名称 用法 描述
children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
parent() $(“#first”).parent(); 查找父亲
eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
next() $(“li”).next() 找下一个兄弟
prev() $(“li”).prev() 找上一次兄弟

猜你喜欢

转载自blog.csdn.net/cupidsCat/article/details/81697708