jQuery的基本使用

jQuery的入口函数

$(function() {

   .... //此处是页面DOM加载完成的入口

  }）；

 $(document).ready(function) {

   .... //此处是页面DOM加载完成的入口

});

 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装

 jQuery对象个DOM对象

1. 用原生JS获取来的对象就是DOM对象
2. jQuery方法获取的元素就是jQuery对象
3. jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

DOM 和 jQ 互换 

1.DOM对象转换为jQuery对象：$(DOM对象)

• $('div')

2.jQuery对象转换为DOM对象（两种方式）

• $("div")[index]
• $('div).get(index) index是索引号

 jQuery基础选择器

语法：$("选择器") //里面选择器直接写css选择器即可，但要加引号

名称	用法
ID选择器	$(' #id')
全选选择器	$('*')
类选择器	$('.class ')
标签选择器	$('div ')
并集选择器	$('div,p,li')
交集选择器	$('li.current')

jQuery层级选择器

名称	用法
子代选择器	$("ul>li");
后代选择器	$("ul li");

jQuery筛选选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(0)")	获取到li中索引为0的li元素
:odd	$("li:odd")	获取到的li元素中索引为奇数的元素
:even	$("li:even")	获取到的li元素中索引为偶数的元素

jQuery筛选方法（重点）

语法	用法	描述
parent()	$('li').parent();	查找父级
children(selector)	$("ul").children("li");	相当于$('ul>li')
find(selector)	$("ul").find("li");	相当于$("ul li ")
siblings(selector)	$(".first").siblings("li");	查找除了本身的兄弟节点
nextAll([exper])	$(".first").nextAll();	查找当前元素之后所有同辈元素
prevAll([exper])	$(".last").prevAll();	查找当前元素之前所有同辈元素
hasClass(class)	$('div').hasClass("protected")	检查当前的元素是否含有某个特点的类，如果有则返回true
eq(index)	$("li").eq(2);	相当于$('li:eq(2)")

隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

 jQuery设置样式

$('div').css('属性值','值')

得到索引号

$(this).index(); 

 操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

1.参数只写属性名，则是返回属性值

$(this).css("color");

2.参数是属性名，属性值，逗号分割，是设置一组样式，属性必须添加引号，值如果是数字可以不用跟单位和引号 

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

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性值可以不用加引号 

$(this).css({"color":"white","font-size":"20px"}); 

设置类样式方法 

作用等同于以前的classList,可以操作样式

1.添加类

$("div").addClass("current");

2.移除类

$("div").removeClass("current"); 

3.切换类

$("div").toggleClass("current"); 

类操作与className区别 

• 原生JS中className会覆盖元素原先里面的类名
• JQuery里面类操作只是对指定类进行操作，不影响原先的类名。