web前端之JQuery简介与使用

一、jQuery简介

1. 介绍

jQuery是JS的工具库，对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

2. 使用

1）引入

先引入jquery文件，才能使用jquery语法

1. CDN 有网
2. 本地文件（常用）

2）工厂函数 - $()

"$()"函数用于获取元素节点，创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例 :

 //$()获取元素节点,需传入字符串的选择器
 $("h1")
 $("#d1")
 $(".c1")
 $("body,h1,p")

3）原生JS对象与jQuery对象

原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

1. 原生JS转换jQuery对象
   $(原生对象)，返回 jQuery 对象

2. jQuery对象转换原生JS对象

   • 方法一 : 根据下标取元素,取出即为原生对象
     var div = $(“div”)[0];
   • 方法二 : 使用jQuery的get(index)取原生对象
     var div2 = $(“div”).get(0);

   <div id="top">哈哈哈</div>
   <script>
      	// 原生JS转换jQuery对象
      	$("#top").html("<div>啦啦啦</div>")
      	// jQuery对象转换原生JS对象
       console.log($("#top")[0].innerText)
   </script>
   

4）jQuery获取元素

jQuery通过选择器获取元素，$(“选择器”)
选择器分类 :

1. 基础选择器

标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")

2. 层级选择器

后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素

3. 过滤选择器
   需要结合其他选择器使用。

:first
  匹配第一个元素 例:$("p:first")
:last
  匹配最后一个元素 例:$("p:last")
:odd
  匹配奇数下标对应的元素
:even
  匹配偶数下标对应的元素
:eq(index)
  匹配指定下标的元素
:lt(index)
  匹配下标小于index的元素
:gt(index)        (index:从0开始)
  匹配下标大于index的元素
:not(选择器)
  否定筛选,除()中选择器外,其他元素
  e.g.
     	// JQ写法
        $("li:eq(1)").css("color","red")
        $("li:eq(1)").css({"color":"red","background-			color":"blue"})
		//隐藏样式
		$("li:eq(1)").css({"color":"red","background-		color":"blue"}).hide()
		// 奇数背景颜色变蓝色,偶数背景红色
        $("li:odd").css("background-color","blue")
        $("li:even").css("background-color","red")

4. 子元素过滤选择器

:first-child
   匹配第一个子元素
:last-child
   匹配最后一个子元素
:nth-child(n)
   匹配第n个子元素(n从1开始计数)

5）操作元素内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性

jq对象.tetx("abs")  //赋值
jq对象.tetx()    //读取
jq对象.html("<b>abs</b>")  //赋值
jq对象.html()    //读取
jq对象.val("abs")  //赋值
jq对象.val()    //读取
e.g.
	console.log($("#top").text())
	$("#top").html("<div>啦啦啦</div>")
e.g.  
	//点击按钮获取输入文本值
	<input type="text">
    <div>
        <button id="btn">获取值</button>
    </div>
    <div id="top"></div>
    <script>
        $("#btn")[0].onclick=function(){ 
        $("#top").text($("input").val())
        }
    </script>

6）操作标签属性

1. attr(“attrName”,“value”)
   设置或读取标签属性

2. prop(“attrName”,“value”)
   设置或读取标签属性
   注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

    $("#btn").on("click",function(){
               //设置或读取标签属性
               console.log($("#ch").prop("checked"));
           })
   

3. removeAttr(“attrName”)
   移除指定属性

7）操作标签样式

1. 为元素添加id/class属性,对应选择器样式
2. 针对类选择器,提供操作class属性值的方法

addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
e.g.
<style>
        .red{
           color: aliceblue;
           background-color: red;
           width: 200px; 
           cursor: pointer;
        }
</style>
***********************************************
	<div id="top">变色器</div>
    <script>
        $("#top").on("click",function(){
            $(this).toggleClass("red");
        })
    </script>

3. 操作行内样式

css("属性名","属性值")  //设置行内样式
css(JSON对象)			 //设置一组CSS样式
/*
JSON对象:常用数据传输格式
语法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 */
e.g.
	//添加单个样式,逗号隔开
	$("li:eq(1)").css("color","red")
	//添加多个样式,用字典模式
    $("li:eq(1)").css({"color":"red","background-color":"blue"})

8）根据层级结构获取元素

1. parent()
   返回父元素
2. parents(‘selector’)
   返回满足选择器的祖先元素
3. children()/children(“selector”)
   返回所有直接子元素/返回满足选择器的直接子元素
4. find(“selector”)
   返回所有的后代元素(包含直接与间接)
5. next()/next(“selector”)
   返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器
6. prev()/prev(“selector”)
   返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器
7. siblings()/siblings(“selector”)
   返回所有的兄弟元素/满足选择器的所有兄弟元素

9）元素的创建,添加,删除

1. 创建
   使用$(“标签语法”)，返回创建好的元素

var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式

2. 添加至页面
   1）作为子元素添加(不能同时使用,后面的会覆盖前面的操作)

$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

​ 2）作为兄弟元素添加(不能同时使用,后面的会覆盖前面的操作)

$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

​ 3）移除元素

$obj.remove();	//移除$obj

e.g.
	<div id="top">变色器</div>
    <script>
        $("#top").on("click",function(){
            // 创建p元素
            var p=$("<p id='p'>你家电脑</p>")
            // 输出内容和id
            console.log(p.text(),p.attr("id"))
            // 子元素添加
            $("#top").append(p); //添加到最后
            $("#top").prepend(p); //添加到第一个
            // 兄弟元素添加
            $("#top").before(p);
            $("#top").after(p);
        })
    </script>

10）动画

1. 显示和隐藏 show(2000,callback)/hide(2000,callback)
2. 下拉和上推 slideDown()/slideUp()
3. 淡隐淡现方式显示 fadeOut()/fadeIn() (块模式操作)
4. 动画函数animate()，可以实现自定义动画 

e.g.
<!-- 页面小球,点击按钮向右移动100px -->
    <div id="ball">
    </div>
    <div id="move">
        <button id="btn">移动</button>
    </div>
    <script>
        $("#btn").on("click",function(){
      $("#ball").animate({"left":"205px"},2000,function(){
                $("#ball").animate({"left":"20px"}),function(){
                    $("#ball").fadeOut(3000)
                }
            })
        })
    </script>


e.g.
<body>
    <div id="div"> 
        <img src="../imgs/img02-3.png" alt="" id="img">
    </div>
    <div>
        <button id="btn">隐藏</button>
    </div>
    <script>
        //直接隐藏,显示
        $("#btn").on("click",function(){
            if($("#btn").text()=="隐藏"){
                $("#img").hide(3000,function(){
                $("#btn").text("显示")
            })
            }
            else{
                $("#img").show(3000,function(){
                $("#btn").text("隐藏")
            })
            }
        })
            //若隐若现
        $("#btn").on("click",function(){
            if($("#btn").text()=="隐藏"){
                $("#img").fadeOut(3000,function(){
                $("#btn").text("显示")
            })
            }
            else{
                $("#img").fadeIn(3000,function(){
                $("#btn").text("隐藏")
            })
            }
        })
        //平铺  (注意:平铺要对图片父标签设置)
        $("#btn").on("click",function(){
            if($("#btn").text()=="隐藏"){
                $("#div").slideUp(3000,function(){
                $("#btn").text("显示")
            })
            }
            else{
                $("#div").slideDown(3000,function(){
                $("#btn").text("隐藏")
            })
            }
        })
    </script>
</body>

11）jQuery事件处理

1. 文档加载完毕
   原生JS 方法：window.onload
   jQuery:

//语法一 
$(document).ready(function (){
  //文档加载完毕后执行
})
//语法二 
$().ready(function (){
  //文档加载完毕后执行
})
//语法三 
$(function(){
  //文档加载完毕后执行
})

区别：
原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

2. 事件绑定方式
   事件名称省略 on 前缀

  //on("事件名称"，function)
  $("div").on("click",function(){});//新版本使用的多些
  //bind("事件名称",function)
  $("div").bind("click",function(){});//1.6-1.8间的版本
  //事件名作为方法名
  $("div").click(function(){});  

3. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。

4. 事件遍历

   • ​ js遍历: for

   • jq遍历:

     jq集合对象.each(function(i,ele){

     //对象的遍历

     })

     $.each(data,function(i){

     //数据的遍历

     })

   e.g.
   
   <ul>
           <li>a</li>
           <li>s</li>
           <li>d</li>
           <li>f</li>
       </ul>
       <script>
           var arr=[11,21,13,14,15]
          // 使用选择器获取全部的表项对象,并保存在变量中
           var lis=$("ul>li");
           // 输出每个元素 i是遍历序列,ele是遍历的对象
           lis.each(function(i,ele){
               console.log(i,ele)
           })
           //i:遍历序列  value:遍历的数据
           $.each(arr,function(i,value){
               console.log(i,v)
           })
       </script>