jQuery知识点笔记 (持续更新)

jQuery语法

1、基础语法:$("selector").action()    *selector:查找查询元素,*acrion:执行对元素的操作

2、jQuery ready函数:$(document).ready(function( ){   });

        简介写法:$(function( ){    });

3、方法的写法:例如:点击方法:$("buton").click(function(){ 点击实行的操作 });

4、DOM元素和jQuery元素的互换

  DOM转jQuery:可通过包装一层$()的方式$(text),将DOM元素 text 封装成jQuery元素

  jQuery转DOM:可通过下标的方式 $("text")[0],将jQuery元素 $("test") 封装成DOM元素

5、jQuery选择器:基于元素的id、类、类型、属性、属性值等查找HTML元素,所有选择器都以美元符开头

 a、基本选择器:

  ①元素选择器(基于元素名选取元素):$("p")

  ②#id选择器(基于id选取元素):$("#text")

  ③.class选择器(基于类选取元素):$(".text")

 b、层次选择器:

  ①ancestor descendant选择器(ancestor代表祖先,descendant代表子孙),用于给定的祖先元素下匹配所有的后代元素:$("#main p")

    此外,还可以用find()方法获取指定元素的所有后代元素:$("#main").find("p") = $("#main p")    

  ②parent>child选择器(parent代表父元素,child代表子元素),用于给定的父元素下匹配所有的子元素:$("form>p")

    此外,还可以用children()方法获取指定元素的子元素:$("form").children("p") = $("form>p")

  ③prev+next选择器(prev和next是两个相同级别的元素),用于匹配所有紧接在prev元素后的next元素:$("div + img")

    此外,还可以用next()方法获取指定元素紧邻的下一个兄弟元素,nextAll()方法获取指定后的所有兄弟元素:

   $("div").next("img") = $("div + img"),$("div").nextAll("img")

  ④element~siblings选择器(element和siblings两个元素共享相同的父元素),用于匹配element元素同级的所有siblings元素:$("div~ul")

   此外,还可以用siblings()方法获取指定元素的所有兄弟元素:$("div").siblings("ul") = $("div~ul")

6、过滤选择器

  a、简单过滤器:以冒号开头,实现简单过滤效果

     

  b、内容过滤器:内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。

 

  

   C、可见性选择器:可见性过滤器就是利用元素的可见状态匹配元素的

   d、表单对象的属性选择器:表单元素的状态属性(例如选中、不可用等状态)匹配元素

  e、子元素过滤器:子元素选择器就是筛选给定某个元素的子元素,具体的过滤条件由选择器的种类而定。

7、属性选择器:属性选择器就是通过元素的属性作为过滤条件进行筛选对象。

8、表单选择器:表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。

 

猜你喜欢

转载自www.cnblogs.com/Raite/p/12630930.html