1.JQ主要功能

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

2.安装

百度 CDN:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

3.语法

$(selector).action()
文档就绪事件防止文档在在完全加载之前运行jq代码

JQ 入口函数:
第一种：
$(document).ready(function(){
            // 开始写 jQuery 代码...
});
第二种：
$(function(){
            // 开始写 jQuery 代码...
 })
JavaScript 入口函数:
window.onload = function () {
    // 执行代码
}

3.选择器

$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素中的span元素
$(div>p)            父子选择器 //div下的所有p元素
$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素
$(":emtyp")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden")       //所有隐藏元素 visible 
$("input:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素

4.事件

4.1语法

$(selector).click(function(){
    // 动作触发后执行的代码!!
});

4.2鼠标事件

• click() 方法是当按钮点击事件被触发时会调用一个函数
• dblclick() 当双击元素时，会发生 dblclick 事件。
• mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件。
• mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
• mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
• hover() 方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

4.3输入框焦点事件

• focus() 当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
• blur() 当元素失去焦点时，发生 blur 事件多用于input

4.4键盘事件

keypress 事件相关的事件顺序

• keydown- 键按下的过程
• keypress - 键被按下
• keyup- 键被松开
• keydown-当键盘键被按下时
• keyup- 键被松开

4.5其他事件

• submit当提交表单时
• change当 <input> 字段改变时警报文本：

5.jQuery HTML

5.1获取属性

$(selector).attr(属性)

返回文档中所有图像的src属性值。
$("img").attr("src");

5.2获取内容

• text() 文本内容
• val() 表单字段值例如input框输入的值\select的option的value值
• html() 元素的内容（包括 HTML 标记）

5.3设置内容和属性

• text(内容)

返回p元素的文本内容。
$('p').text();

• html(内容)

内容设置为空（清除）
$('p').html("");

• val(内容)

<select id="single">
    <option>Single</option>
    <option selected="selected">Single2</option>
</select> 

<input type="checkbox" value="橘子" name="check">橘子1</input>
<input type="checkbox" value="香蕉" name="check">香蕉1</input>
 <input type="checkbox" value="西瓜" name="check">西瓜1</input>
<input type="checkbox" value="芒果" name="check">芒果1</input>
<input type="checkbox" value="葡萄" name="check">葡萄1</input>

<input type="radio" value="radio1" name="radio"/> radio1
<input type="radio" value="radio2" name="radio"/> radio2

<button id="btn1">获取checkbox值</button>
<button id="btn2">获取radio值</button>

//获取select值
$("#single").change(function(){
    var selectValue=$(this).val();
    console.log(selectValue);
})
//获取checkbox值
$("#btn1").click(function(){
    var checkboxValue =[]; 
    $('input[name="check"]:checked').each(function(){ 
        checkboxValue.push($(this).val()); 
    }); 
      console.log(checkboxValue);   
})
//获取radio值
$("#btn1").click(function(){
       var radioValue=$('input[name="radio"]:checked').val();
          console.log(radioValue);
}

• attr(属性，属性值)

设置单个属性：
attr("class","one");
设置多个属性：
attr({
      "data-id":1213,
      "class":"pone"  
});

5.4添加元素

• 在元素的内部插入
  append() - 在被选元素的结尾插入内容
  prepend() - 在被选元素的开头插入内容
• 在元素的旁边插入
  after() - 在被选元素之后插入内容
  before() - 在被选元素之前插入内容
• 插入多个

var text1=$("<p></p>").text("lala");
var text2=$("<p></p>").text("lala");
var text3=$("<p></p>").text("lala");
$("p:first").prepend(text1,text2,text3);

5.5两种创建元素的方法

js
var text1=document.createElement("p");
text1.innerHTML="hahha";

jq
 var text1=$("<p></p>").html(内容).appendTo($(selector))

5.6删除元素

• remove() - 删除被选元素（及其子元素）

<div> 
     <div id="one">
            <p>1</p>
            <p>2</p>
            <p>3</p>
    </div>
</div>
$("#one").remove();
变成
<div> 
</div>

empty() - 从被选元素中删除子元素

   <div id="one">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
$("#one").empty() ;或者
$("#one").html("") ;
变成
<div id="one">
</div>

• 过滤被删除的元素

<div id="three">          
        <p class="=no">1</p>
         <p class="=no">2</p>
        <p>3</p>
</div>
 $("#three").remove(".no");
变成
<div id="three">          
      <p class="=no">1</p>
      <p class="=no">2</p>
 </div>

5.7获取并设置 CSS 类(放入style属性）

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

-- 返回css属性
> console.log($("#three").css("color"))

-- 设置css属性
> $("#three").css("background-color","red");

--设置多个css属性
> $("#four").css({
            "background-color":"red",
            "font-weight":"bold"
        })

• 尺寸

  
  
  image.png
  
  
  image.png
  
  
  image.png

//获取
$(selector).width();
//设置
$(selector).width("120px");

6.JQ的Ajax

6.1 load

• 创建一个test.html文件，用于被load()方法加载并追加到页面中

><h1>Ajax</h1>
    <div id="ben_one"></div>
    <button id="ben_firstbtn">点击</button>
<script>
$(function(){
    $("#ben_firstbtn").click(function(){
      $("#ben_one").load("index14.html ",function(responseTxt,statusTxt,xhr){
          console.log(responseTxt);
          //console.log(statusTxt);
          //console.log(xhr);
      })
    })    
})
</script>

• 文件中 class="ben" 的元素的内容，加载到指定的 <div> 元素中：

  $("#ben_one").load("index14.html .ben ",function(responseTxt,statusTxt,xhr){
}

• 回调函数

 $("#ben_one").load("index14.html .ben ",function(responseTxt,statusTxt,xhr){}
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

6.2 get

语法：$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

> $.get("/doget",{"name":"ben","age":23},function(result,status){
        
     })

6.3用Jquery实现ajax提交form表单

6.4 Post

语法：$.post(url, [data], [callback], [type])
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

7.jQuery 遍历

7.1向上遍历 DOM 树

• parent() 返回被选元素的直接父元素。
• parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
• parentsUntil() 返回介于两个给定元素之间的所有祖先元素

<div id="ben_one">
        <p id="ben_two">p
            <p id="ben_three">
                p
            </p>
        </p>
        <span>span</span>
        <p>p</p>
        <span>span</span>
        <p>p</p>
    </div>
       <button id="ben_firstbtn">点击</button>
$("#ben_firstbtn").click(function(){
      $("#ben_two").parent().css("border","1px solid red");
      $("#ben_two").parents().css("border","1px solid blue");
      $("#ben_two").parents("#ben_one").css("border","1px solid blue");
      $("#ben_three").parentsUntil("div").css("border","1px solid blue");
     })

7.2后代

• children() 返回被选元素的所有直接子元素
• find() 返回被选元素的后代元素，一路向下直到最后一个后代。

 $("div").find("span");  //返回后代所有的span
$("div").find("*");  //返回所有后代

7.3 同胞

• siblings() 返回被选元素的所有同胞元素。
• next() 返回被选元素的下一个同胞元素
• nextAll() 返回被选元素的所有跟随的同胞元素
• nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
• prev()
• prevAll()
• prevUntil()

> <h1>同胞</h1>
    <div id="ben_one">DIV</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <button id="ben_firstbtn">点击</button>
// $("#ben_one").siblings().css("border","1px solid blue");   //h1 p1 p2 p3
       //$("#ben_one").next().css("border","1px solid blue"); //p1 
       $("#ben_one").nextAll().css("border","1px solid blue"); //p1 p2 p3

7.4过滤（选择内容有很多组）

• first() 方法返回被选元素的首个元素。
• last() 方法返回被选元素的最后一个元素。
• eq() 方法返回被选元素中带有指定索引号的元素。
• not() 方法返回不匹配标准的所有元素。（与filter相反）
• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

> <p class="not">p1</p>
    <p>p2</p>
    <p>p3</p>
 // $("p").first().css("border","1px solid blue");  //p1
      //$("p").last().css("border","1px solid blue");  //p3
      //$("p").not(".not").css("border","1px solid blue");  //p2 p3
      //$("p").eq(1).css("border","1px solid blue");  //p2

image.png

8.jQuery 效果

8.1隐藏和显示

• hide()
• show()
• toggle()

8.2淡入淡出

• fadeIn() 淡入（慢慢显示）已隐藏的元素 即css设置了display:none;
  语法：$(selector).fadeIn(speed,callback);
  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
  可选的 callback 参数是 fading 完成后所执行的函数名称。

• fadeOut() 淡出（慢慢隐藏）可见元素
  语法：$(selector).fadeOut(speed,callback);
  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  可选的 callback 参数是 fading 完成后所执行的函数名称。

• fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换
  语法：$(selector).fadeToggle(speed,callback);
  可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  可选的 callback 参数是 fading 完成后所执行的函数名称

• fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）
  语法：fadeTo(speed,opacity,callback);
  必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

$("p").fadeTo("slow",0.15);  

8.3滑动

• slideDown()
• slideUp()
• slideToggle()

 // $("p").slideToggle("slow");       
// $("p").slideDown("slow");       
 // $("p").slideUp("slow");  

9.链(Chaining)

允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条
把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

10.获取直接的父代元素

parent()\next()\previous()
方法可以获得一个节点的父节点next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点

<div id="cartype">
        <select></select>
        <span>汽车类型</span>
</div>
var cartype=$("#cartype").children("select");
cartype.parent().show();  //即   <div id="carname">显示
cartype.next().show();  //即 <span>汽车类型</span>显示