jquery基本操作

3.1.1 基本选择器

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

3.1.2 层级选择器

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

3.1.3 基本筛选器

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

3.1.4 属性选择器

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

3.1.5 表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")

查找筛选器
$("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()

属性操作
--------------------------属性
$("").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")

文档处理

//创建一个标签对象
$("")

//内部插入

$("").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]])

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])

事件处理(事件委托)
$("").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)

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none;  80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>



 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   })
    </script>
</body>
</html>