JQ学习

2019-03-15  本文已影响0人  benbensheng

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鼠标事件

4.3输入框焦点事件

4.4键盘事件

keypress 事件相关的事件顺序

4.5其他事件

5.jQuery HTML

5.1获取属性

$(selector).attr(属性)

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

5.2获取内容

5.3设置内容和属性

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

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

<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("class","one");
设置多个属性：
attr({
      "data-id":1213,
      "class":"pone"  
});

5.4添加元素

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删除元素

<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属性）

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

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

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

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

6.JQ的Ajax

6.1 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>

  $("#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 树

<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后代

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

7.3 同胞

> <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过滤（选择内容有很多组）

> <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隐藏和显示

8.2淡入淡出

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

8.3滑动

 // $("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>显示
上一篇 下一篇

猜你喜欢

热点阅读