jQuery常用知识总结

时间：2023-03-08 16:03:14

jQuery常用知识总结

  • 简介

  • 选择器

  • 属性操作

  • jQuery()

  • each

  • event事件

  • jQuery扩展

一、简介

What is jQuery

jQuery is fast small and feature-rich JS's libarary; 它兼容多个浏览器

syntax jQuery

$(selector).action()

二、选择器

selector

basic selector

$("*")                    id 选择器 $("#id")          class选择器 $(".class")      元素选择器 $("element")                         $("#id,.class,element")

层次选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

基本筛选器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

筛选器

$("li").eq(2)    ------->   eq(index)里面放的是索引,返回一个jquery对象

  $("li").first() -------------->return 第一个jquery对象 

$("ul li").hasclass("test")  --------->return boolean (true or false)

查找筛选器

查找子标签：         $("div").children(".test")      $("div").find(".test")  

 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()                         $(".test").nextUntil() 

 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()                           $("div").prevUntil()

 查找所有兄弟标签：    $("div").siblings()

 查找父标签：         $(".test").parent()              $(".test").parents()                         $(".test").parentUntil()

查找子标签：children()   所有的儿子    find() 所有的后代

查找所有的兄弟   siblings()

向下查找兄弟  next() 向下第一个兄弟，nextAll()向下所有的兄弟（弟弟）nextUntil()   直到遇到什么

向上查找兄弟  prev()向上第一个兄弟   ，prevAll()向上所有的兄弟

查找父标签       他的父亲，parent()        parents()祖宗，  不常用          parentUntil()   向上找祖宗直到。。

三、属性操作

.添加删除属性

.addClass()

.removeClass()

.html()  =====innerHTML

.css({color:"red",fontsize:"12px"})

.css("color","red")

.attr()   ----------- 适用于自定义属性

.removeAttr()

.

prop()   ----------------- 适用于固有属性

.removeProp()

显示隐藏效果

show()

hide()

四、event事件

页面载入

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

事件绑定

jquery对象.事件(函数)

$(selector).click(function(e){

e   event对象，

})

事件委托

$(selector).on(eve,[selector],[data],fn)

相关文章