jQuery笔记

一、jQuery优点:

write Less Do more 写的少，做得多 轻量级

二、jQuery引入方式:

script引入jQuery.js

CDN远程调用

安装 npm i jQuery

三、jQuer入口函数写法

jQuery(document).ready(function(){})

$(function(){})

$是jQuery的工厂函数，等价于jQuery

四、网页渲染过程

1、下载html生成dom树

2、下载css生成css树

3、 dom与css结合生成渲染树

4、开始渲染页面，遇到js会阻塞

五、window.onload与 $(function(){})区别

window.onload:

执行时机，dom树加载完成（css文件、图片）

写多个，后者会覆盖前者

没有简写方式

$(function(){})

执行时机，dom树加载完成（不包括css文件、图片）

可以写多个

有简写方式

六、js原生对象与jquery对象转换

var _app=document.querySelector("#app");

$("#app") jQuery对象

$("#app").get(下标) $("#app")[下标]

七、jQuery对象遍历

1、转换数组

Array.from()

$().get()

2、 this：指当前遍历到的元素,是js原生对象

$("#app").each(function(index,item){

clog(index,this)

})

$.each($("#app"),function(index){

clog(index,this)

})

八、jQuery选择器

基本选择器: id 标签 类

层次选择器: E>F E F E+F E~F

属性选择器: E[attr=value]

过滤选择器:

基本过滤选择器:

$(li:first) $(li:last) 第一个与最后一个

$(li:even) $(li:odd) 奇偶行

$(li:gt(2)) $(li:lt(2)) $(li:eq(2)) 大于小于等于

$(:header) h1-h6

$(li:not(.active))

内容过滤选择器:

$(div:empty) 没有内容的空div

$(div:parent) 是父元素的div

$(div:has(p)) 含有p标签的div

$(div:contains(内容)) 包含内容的div

可见性过滤选择器: $(:visible) :选择所有可见的元素

$(:hidden) :选择所有隐藏的元素（display:none, type=hidden）

表单对象过滤选择器:

$(:enabled) 所有可用的表单

$(:disabled) 所有禁用的表单

$(:checked) 所有被选中的表单

$(:selected) 被选中的option

$(:checkbox)

$(:text)

$(:radio)

层次节点:

$(".wrapper") .next() //下边的第一个兄弟

$(".wrapper") .nextAll() //下边的所有兄弟

$(".wrapper") .nextAll("tag") //下边的指定兄弟

$(".wrapper") .nextUntil("tag") //区间内兄弟，两边不闭合

$(".wrapper") .prev() //上边的第一个兄弟

$(".wrapper") .prevAll() //上边的所有兄弟

$(".wrapper") .prevAll("tag") //上边的指定兄弟

$(".wrapper") .prevUntil("tag") //区间内兄弟，两边不闭合

$(".wrapper").parents() //所有祖先元素

$(".wrapper").parents("tag") //指定祖先元素

$(".wrapper").closest("tag") //最近的指定祖先元素

$(".wrapper").parent() //父元素

$(".wrapper").chidren() //子元素

$(".wrapper").chidren("tag") //指定子元素

$(".wrapper").find("tag") //指定子孙元素

$(".wrapper").offsetParent() //最近的已经定位的父元素

index方法

$(tag).index() 获取tag在同辈中的下标

$("p").index($(tag)) 获取tag在同辈p标签中的下标

$(tag).eq(index) 获取下标是index的tag元素