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、文档处理

创建一个标签对象 $("<p>") 内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); 外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); 替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); 删除 $("").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)