1.JQ主要功能

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

2.安装

百度 CDN:

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

  $("#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() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
parentsUntil() 返回介于两个给定元素之间的所有祖先元素


        p
            

                p
            
        
        span
        p
        span
        p
    
       
$("#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()

> 同胞
    DIV
    p1
    p2
    p3
    
// $("#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() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

> p1
    p2
    p3
 // $("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方法可以获得一个节点的上一个兄弟节点


        
        汽车类型

var cartype=$("#cartype").children("select");
cartype.parent().show();  //即   显示
cartype.next().show();  //即 汽车类型显示

JQ学习