关于JQuery的一些知识点

Posted 2020-08-17 小L

1.jQuery的入口函数

1.1 语法jQuery(document).read(function(){ });

$(function(){ });// **

window.onlaod = function(){}

$ === jQuery // $是jQuery全局函数的别名。

1.2注意事项： （重点）

document ready: 是html文档准备就绪，也就是dom树创建完成了。可以进行dom操作了。重要的是：html页面下载完成，并准备就绪window.onload: 是整个页面所有的资源都加载完成，图片、js、css等

1.3 文档加载顺序： （重点）

下载html页面，解析html标签，遇到link标签加载css，遇到script加载js

 

2. jQuery 选择选取元素

2.1 jQuery选择器

2.1.1 ID选择器（js一般尽量用ID选择器，效率最高） （重点）

$("#id").html();

2.1.2 类选择器 （重点）

$(".className").text();

2.1.3 标签选择器 （重点）

$(‘p‘).click();

2.1.4 属性选择器

$("li[id]")、 $("li[id=‘link‘]").fadeIn();

2.1.5 层级选择器 （重点）

$("li .link").show();

2.1.6 父子选择器

$("ul > li")

2.1.7 伪类选择器

$("p:first")

$("ul li:eq(3)")

2.1.8 表单选择器

$(":text")

$(":checkbox")

$(":checked"）

3 jQuery选择方法

3.1 获取父级元素

$(selector).parent();     //获取直接父级

$(selector).parents(‘p‘); //获取所有父级元素直到html   

3.2 获取子代和后代的元素

$(selector).children();   //获取直接子元素

$(selector).find("span"); //获取所有的后代元素

find方法 可能用的多。

3.3 获取同级的元素

$(selector).siblings()    //所有的兄弟节点

$(selector).next()        //下一个节点

$(selector).nextAll()     //后面的所有节点

$(selector).prev()        //前面一个的兄弟节点

$(selector).prevAll()     //前面的所有的兄弟节点

3.4 过滤方法

$("div p").last();        //取最后一个元素

$("div p").first();       //取第一个元素

$("p").eq(1);             //去第n个元素

$("p").filter(".intro");  //过滤，选择所有p标签带有 .intro类

$(‘p.intro‘)

$("p").not(".intro");     //去除，跟上面的filetr正好相反