JQuery语法：查找+操作

jquery的基础语法：$(selector).action() 即查找元素.操作
一、查找元素（选择器和筛选器）
1.1 选择器
1.1.1 基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

1.1.2 层级选择器

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

1.1.3 基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
1.1.4 属性选择器
$('[id="div1"]')   $('["alex="sb"][id]')
1.1.5 表单选择器
$("[type='text']")----->$(":text")         注意只适用于input标签 : $("input:checked")
1.2 筛选器
1.2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
1.2.2 查找筛选器

     $("div").children(".test")     $("div").find(".test")  
                                   
     $(".test").next()    $(".test").nextAll()    $(".test").nextUntil()
                               
     $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
                            
     $(".test").parent()  $(".test").parents()  $(".test").parentUntil()
     
     $("div").siblings()

二、操作
1、属性操作
    --------------------------属性
    $("").attr();
    $("").removeAttr();
    $("").prop();
    $("").removeProp();
    --------------------------CSS类
    $("").addClass(class|fn)
    $("").removeClass([class|fn])
    --------------------------HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])
    ---------------------------
    $("").css("color","red")

2、文档处理

创建一个标签对象
 $("")
 内部插入
 $("").append(content|fn) ----->$("p").append("Hello");
 $("").appendTo(content) ----->$("p").appendTo("div");
 $("").prepend(content|fn) ----->$("p").prepend("Hello");
 $("").prependTo(content) ----->$("p").prependTo("#foo");

 外部插入

 $("").after(content|fn) ----->$("p").after("Hello");
 $("").before(content|fn) ----->$("p").before("Hello");
 $("").insertAfter(content) ----->$("p").insertAfter("#foo");
 $("").insertBefore(content) ----->$("p").insertBefore("#foo");

 替换
 $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");

删除

 $("").empty()
 $("").remove([expr])

 复制

 $("").clone([Even[,deepEven]])
3、css操作

    CSS
       $("").css(name|pro|[,val|fn])
   位置
       $("").offset([coordinates])
       $("").position()
       $("").scrollTop([val])
       $("").scrollLeft([val])
   尺寸
       $("").height([val|fn])
       $("").width([val|fn])
       $("").innerHeight()
       $("").innerWidth()
       $("").outerHeight([soptions])
       $("").outerWidth([options])

三、事件

页面载入
 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
 $(document).ready(function(){}) -----------> $(function(){})

 事件处理
 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
 // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
 // click事件；

 [selector]参数的好处:
 好处在于.on方法为动态添加的元素也能绑上指定事件；如：

 //$('ul li').on('click', function(){console.log('click');})的绑定方式和
 //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
 //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
 //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

 [data]参数的调用:
 function myHandler(event) {
 alert(event.data.foo);
 }
 $("li").on("click", {foo: "bar"}, myHandler)

JQuery语法：查找+操作

猜你喜欢