jQuery基础

1. jQuery 函数位于一个 document ready 函数中：例如这样:

$(document).ready(function(){
     // 开始写 jQuery 代码...
});

可以简写

   $(function(){
      // 开始写 jQuery 代码...
});

2. jquery选择器

    获取 id 元素 $("#test").hide();
    获取class元素 $(".test").hide();
   

image.png

：可以理解为种类的意思 [] 可以理解为属性。。。

3.事件 focus() 聚焦事件 blur()失去焦点事件。一般用于搜索框。 输入框中。键盘代码事件

var validKeys = { start: 65, end: 90  }; //只对 keycode在 65 到90 之间的按键的按下处理、、
     $("#keys").keydown( validKeys, function(event){
     var keys = event.data;  //拿到validKeys对象.
   return event.which >= keys.start && event.which <= keys.end;

} );
4.显示或隐藏元素

显示或隐藏  $("p").toggle();     $(selector).toggle(speed,callback);    



1. .$(selector)选中的元素的个数为n个，则callback函数会执行n次；


<p>1.测试hide</p>
<p>2.测试hide</p>
<p>3.测试hide</p>
<button id="hide_p">点我</button>

 $("#hide_p").click(function(){
    $("p").hide(100,function(){
        console.log(111); /// 输出三次
    });
  });

5.淡入淡出效果

  $("#div2").fadeToggle("slow");  ："slow"、"fast" 或毫秒。  或空、  $(selector).fadeTo(speed,opacity,callback);  设置元素的透明度。

6. $('#pannel').slideToggle(); 上下滑动。
   默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
   7.组合动画

   $('#anim_btn').click(function(){
    $(".anim_content").animate({
        left:'250px', ///向右移动。
        opacity:'0.5',
        height:'150px',//// 可以这样写 height :'+= 150px'; 相对于当前值。
        width:'150px'
    });
   });
   

组合动画2 。

 var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

   $("button").click(function(){
     $("div").animate({
      height:'toggle' //预定义的值
   });
 });

停止所有的动画效果。 停止动画或效果，在它们完成之前。 stop();
7.链式写法

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

8. 操作dom

三个简单实用的用于 DOM 操作的 jQuery 方法：

    alert("Text: " + $("#test").text());text() - 返回这个值
    html() - 设置或返回所选元素的内容（包括 HTML 标记）
    val() - 设置或返回表单字段的值


    $('#btn1').click(function(){
        $('#test1').text('11111');
       });
    $('#btn2').click(function(){
      $('#test2').html('<strong>11111</strong>');

 });
   $('#btn3').click(function(){
     $('#test3').val('11111');

 });

设置属性值 ：

       <a href="http://www.baidu.com">;
                ![](test.jpg)
                 </a>

                   $('#test4').attr({
                   "src":"截图00.png"，
                    “width”:"100px"
                 });
     alert($("#runoob").attr("href")); 显示 属性值。。

      $("#runoob").attr("href", function(i, origValue){
             return origValue + "/jquery";
    });

9.添加元素

   function appendText()
     {
        var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
        var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
       $("body").append(txt1,txt2,txt3);        // 追加新元素

}

      append() 。之后 。prepend之前

     append/prepend 与 before/after 的区别


    append :    

       <p>
         <span class="s1">s1</span>
      </p>

       <script>
         $("p").append('<span class="s2">s2</span>');
        </script>

结果是:

       <p>
          <span class="s1">s1</span>
           <span class="s2">s2</span>
       </p>

after

       <p>
          <span class="s1">s1</span>
       </p>

      <script>
            $("p").after('<span class="s2">s2</span>');
      </script>

结果是:

        <p>
            <span class="s1">s1</span>
       </p>

        <span class="s2">s2</span>

       append 在元素内部嵌入

       after 在元素外部追加

10.删除元素/删除元素及其子元素。

remove() 删除当前元素及其子元素，。。
empty() 清空子元素。。。父视图 还是存在的。
$("p").remove(".italic"); 移除所有class = italic的p 元素

11.添加或移除css样式

   $("h1,h2,p").addClass("blue");
   $("div").addClass("important");


     removeClass('blue');



 $("button").click(function(){ 
        $("h1,h2,p").toggleClass("blue"); //存在则删除。存在则添加
    });

12.设置返回元素的css属性

    $("p").css("background-color");// 这里只能返回第一个

    $("p").css("background-color","yellow");


    $("p").css({"background-color":"yellow","font-size":"200%"});

13.尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法设置或返回元素的宽度（包括内边距）。
innerHeight()方法设置或返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框，不包含外边距）。
outerHeight() 方法返回元素的高度（包括内边距和边框，不包含外边距）。
14.遍历

   parent() 直接父元素

   parents()所有父元素

    $("span").parents("ul").css({"color":"red","border":"2px solid red"}); 父元素中是ul的给设置css属性


    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 

    $("span").parentsUntil("div");


    $("div").children();  直接子元素

    $("div").children("p.1"); 直接子元素中 class ="1"的p

    $("div").find("span"); 返回属于 <div> 后代的所有 <span> 元素：

      $("div").find("*");  所有子元素...


      $("div p").first(); div中的第一个p元素
      $("div p").last();

     $("p").eq(1); 第二次出现的p元素。


    $("div p").filter(".url").css("background-color","yellow"); 
    $("#123 p").filter(".url").css("background-color","yellow"); <div id="123">


        $("p").not(".url");  与filter相反。。。