关于JQuery的一些知识点

时间:2023-03-09 23:10:46
关于JQuery的一些知识点

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正好相反