JQuery总结

最新推荐文章于 2024-04-15 09:43:23 发布

星灭233

最新推荐文章于 2024-04-15 09:43:23 发布

阅读量182

点赞数

分类专栏： JS jQuery 文章标签： javascript js jquery

本文链接：https://blog.csdn.net/ksx2333/article/details/115334284

版权

JS 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基础知识，包括与原生JavaScript的对比、核心函数和对象、基本选择器、层次选择器、过滤选择器的使用，以及属性操作如attr()、prop()和class管理。通过实例展示了如何读取和设置元素属性，以及如何处理事件。文章还探讨了jQuery中的工具方法，如$.each()、$.trim()等。

摘要由CSDN通过智能技术生成

前言

引自W3school:

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

引自百度百科:
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

引入的jQuery库必须写在最前面！！！

1 初识jQuery（与原生js比较）

通过与原生的js代码比较:
body内容：

<body>
    用户名:<input type="text"  id="username" value="">
    <button id="btn1">确定(原生js)</button>
    <button id="btn2">确定(jquery版)</button>
</body>

在这里插入图片描述

1.1 方式一通过原生js获取表单中的内容

    <script>
        // 方式一 通过原生js获取表单中的内容
        window.onload=function(){
            var btn = document.getElementById("btn1")
            btn.onclick=function(){
                alert(document.getElementById("username").value)
                alert(this)
            }
        }
    </script>

点击“确定(原生js)”
在这里插入图片描述

1.2 方式二通过引用jquery库再调用其方法

    <!-- jquery是别人封装好一个库 直接拿来用就可以了 -->
    <script type="text/javascript" src="./js/jquery-1.10.1.js" ></script>
    <script>
        //页面加载完毕之后回调
        $(function(){
            //jquery将css结合
           $('#btn2').click(function(){
               //获取输入框的内容
               alert($("#username").val())
               //jquery能用原生的写法吗
            //    alert(this);//可以
               console.log(this);//
            //    alert(this.innerHTML) 
               console.log(this.innerHTML) 
               //jquery api写法
            //    alert($(this).html())
               console.log($(this).html())
           })
        })
    </script>
</head>

this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
总的原则，那就是this指的是，调用函数的那个对象。
点击“确定(jquery版)”
在这里插入图片描述

2 jQuery核心函数

   简称: jQuery函数($/jQuery)
   jQuery库向外暴露的就是$/jQuery
   引入jQuery后 直接使用$即可
     当成函数去用  $(xxx)
     当成对象去用  $.xxx()

     函数举例:
        $("#demo")
        $(".demo")
        $("div span")
        $(".demo li")

<body>
    <div id="box" class="wrap">
        <button id="btn">测试</button>
    </div>
</body>
<script src="js/jquery-1.10.1.js"></script>
<script>
    //js原生获取节点
    var dom1 = document.getElementById("btn")
    //需求: 点击按钮 显示按钮的文本 显示一个新的输入框

    //$()就是一个函数
        $(function(){
        $("#btn").click(function(){//$("#btn") 是一个函数
            $("<div style='width:100px;height:100px;border:1px solid red;background:skyblue'></div>").appendTo(".wrap")
            $("这里面写元素(标签+属性+标签之间的内容 = 元素)").appendTo(".wrap")
        })
    })
</script>

点击前在这里插入图片描述点击后

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

3 jQuery核心对象

     简称:jQuery对象
     使用对象 $obj.xxx()
    
     对象举例:
        $("#demo").css()
        $("ul li").each()
        $("#box03").index()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <button>测试一</button> 
   <button>测试二</button> 
   <button id="btn3">测试三</button> 
   <button>测试四</button>
   <p>测试565665</p>
</body>
<script src="js/jquery-1.10.1.js"></script>
<script>
    /*
    需求: 
    需求1: 统计页面中一共有多少个按钮
    需求2: 取出第二个按钮中的文本信息
    需求3: 输出所有的按钮button标签中的文本
    需求4: 输出'测试三'按钮是在所有按钮的第几个
    */ 
   $(function(){
       var $btn= $("button")  //document.getElementsByTagName("button")
       //需求1:统计页面中一共有多少个按钮
       console.log($btn.length,$btn.size())//size()获取元素个数
       //需求2: 取出第二个按钮中的文本信息
       console.log($btn.get(1).innerHTML)
       //需求3: 输出所有的按钮button标签中的文本
       //$btn.each()   就是一个对象 each是jquery对js原生语法的封装
       $btn.each(function(i,item){
         // console.log(i)
         // console.log(item)
          console.log(this.innerHTML)
       })
       // 需求4: 输出'测试三'按钮是在所有按钮的第几个
       //$("#btn2").index() 也是一个对象 
       console.log($("#btn3").index())
   })
</script>
</html>

4 jQuery中的基本选择器

<body>
    <div id="div1" class="box" >div1(class="box")</div>
    <div class="box">div(box)</div>
    <span>AAAAA</span>
    <span>BBBBB</span>
</body>

css中的基本选择器有哪些？
class id 标签并集交集

jquery在去获取节点的时候也有基本选择器的概念

<script src="js/jquery-1.10.1.js"></script>
<script>
    /*
    需求：
    1 选择id为div1的元素 变成红色
    2 选择所有div的元素 背景改成绿色
    3 选择所有class属性为box的元素
    4 选择所有div和span的元素
    5 选择向所有class属性为box的div元素
    */ 
    //id选择器
    $("#div1").css("color","red")
    //标签选择器
    $("div").css("background","green")
    //class选择器
    $(".box").css("border","1px solid #000")
    //并集选择器
    $("div,span").css("color","yellow")
    //交集选择器
    $("div.box").css("color","blue")

    //总结: jquery基本选择器同css类似 id选择器 标签选择器 class选择器  并集选择器  交集选择器
</script>

4.1 id选择器

id选择器：$(’#id’);获取指定id的元素

<script src="../JQuery/02jquery基础/js/jquery-1.10.1.js"></script>
<div id="box">id选择器</div>
<script>
        //id选择器
        $('#box').css({
        float:'left',
        'height':100,
        'width':100,
        'background':'red'
    });
</script>

4.2 类选择器

类选择器：$(’.class’); 获取同一类class的元素

<!--类选择器-->
<div class="box2">类选择器</div>
<script>
        //类选择器
        $('.box2').css({
        float:'left',
        'height':100,
        'width':100,
        'background':'orange'
    });
</script>

4.3 标签选择器

标签选择器：$(‘div’);获取同一类标签的所有元素

<!--标签选择器-->
<span>标签选择器(这个是本体)</span>
<script>
    //标签选择器
    $('span').text('标签选择器(这个是修改体)').css('background','yellow').css('float','left');

</script>

4.4 并集选择器

并集选择器：$(‘div,p,li’);使用逗号分隔，只要符合条件之一就可

<!--并集选择器-->
<p>并集选择器</p>
<div class="box3">并集选择器</div>
<script>
        //并集选择器
        $('p,.box3').css({
        border:'1px solid yellow',
        margin:0,
        float:'left',
        width:100,
        height:100,
        background:'green'
    });
</script>

4.5 交集选择器

交集选择器：$(‘div.redClass’);获取class为redClass的div元素

<!--交集选择器-->
<div class="box4">交集选择器</div>
<script>
    //交集选择器
    $('div.box4').css({
        float:'left',
        width:100,
        height:100,
        background:'cyan',
        // border-radius:50%
        'border-radius':'50%'
    });
</script>

5 jQuery中的层次选择器

<body>
    <ul>
        <span>大儿子</span>
        <span>二儿子</span>
        <li>AAAAAA</li>
        <li><span>BBBBBB</span></li>
        <li class="box"><span>CCCCCCC</span></li>
        <li>DDDDDDD</li>
        <li class="boxone">EEEEEEE</li>
        <li >FFFFFF</li>
        <li >GGGGGGGGG</li>
    </ul>
</body>

层次选择器查找子元素后代选择器兄弟选择器

5.1 ancestor descendent

在给定的祖先元素下匹配所有的后代元素

5.2 parent> child

在给定的父元素下匹配所有的子元素

5.3 prev+next

匹配所有紧接着prev元素后的next元素

5.4 prev~siblings

匹配所有紧接着prev元素后所有的siblings元素

5.5 源码

<script src="js/jquery-1.10.1.js"></script>
<script>
    /*
    需求:
     1 选中ul下所有的span元素
     2选中ul下所有的子元素span
     3 选中class为box的下一个li
     4 选择ul下的class为boxone元素后边所有的兄弟元素
    */ 
    $("ul span").css("color","red")  
    $("ul > span").css("color","yellow")
    $(".box + li").css("color","blue")
    $(".boxone ~ li").css("color",'pink')
</script>

6 jQuery中的过滤选择器

<body>
    <div>div1</div>
    <div class="box">div2</div>
    <div>div3</div>
    <ul>
        <li>AAAA</li>
        <li>B</li>
        <li class="box">C</li>
        <li>D</li>
        <li title="EEEEE">E</li>
        <li title="hello">F</li>
        <li style="display:none">G</li>
    </ul>
</body>

过滤选择器的概念
在原有的选择器匹配的基础上进一步过滤的选择器
* 基本
* 内容ul
* 可见性
* 属性

jQuery函数形式和jQuery对象形式的写法 没有严格的鸿沟

<script src='js/jquery-1.10.1.js'></script>
<script>
/*
需求：
1 选择界面中第一个div元素
2 选择最后一个class为box的元素
3 选择所有class属性不是box的div
4 选择第二个和第三个li元素
5 选择内容为E的li
6 选择隐藏的li
7 选择具有title属性的li元素
8 选择所有的title不为EEEEE的li元素
*/ 
$("div:first").css("background","pink")
$(".box:last").css("color","red")
$("div:not(.box)").css("color","green")

$("li:eq(1)").css("color","red")
// $("li").eq(1).css("color","red")

$("li:eq(2)").css("color","red")
$("li:contains(E)").css("border","1px solid #000")
$("li:hidden").show(1000)
$("li[title=EEEEE]").css("background","blue")
$("li[title][title!=EEEEE]").css("color","yellow")
</script>

在这里插入图片描述

7 工具方法

7.1 $.each 遍历数组或者对象中的数据

    var person={
        name:"tom",
        age:12
    }
    $.each(person,function(key,v){//这个时候key是键，v是值
       console.log(key,v)
    })

控制台输出：
输出结果

7.2 $.trim() 取出字符串两边的空格

    var str="  aaaa "
    console.log("-----"+$.trim(str)+"------")

控制台输出：
输出结果

7.3 $.type(obj) 得到数据的数据类型

    var arr=[1,2,3,4,5]
    console.log($.type(arr)) //array

控制台输出：
在这里插入图片描述

7.4 $.isArray(obj) 判断是否是数据

    console.log($.isArray(arr)) //true

控制台输出：在这里插入图片描述

7.5 $.isFunction(obj) 判断是否是函数

    console.log($.isFunction($))   //true

控制台输出：在这里插入图片描述

7.6 $.parserJSON(json) 解析json字符串为js对象/数组

    var json='{"username":"jack","age":"12"}'
    console.log(json)

控制台输出：在这里插入图片描述

    var json='{"username":"jack","age":"12"}'
    console.log($.parseJSON(json))
    var a = $.parseJSON(json)
    console.log(a.username)

控制台输出：在这里插入图片描述

8 属性

jquery的这些方法都是对js原生的方法的封装

8.1 操作任意属性

8.1.1 attr()方法设置或返回被选元素的属性和值

当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

8.1.2 removeAttr()方法从被选元素移除一个或多个属性。

()内元素是必需的。规定要移除的一个或多个属性。如需移除若干个属性，请使用空格分隔属性名称。

8.1.3 prop()设置或返回被选元素的属性/值

当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。

8.1.4 二者的区别。

1）attr和prop区别
attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。 prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。
2）attr和prop怎么选择？
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
3）举例：

prop：
<input id="chke1"type="checkbox"/>
attr:
<div data-name="555"></div>

8.2 操作class属性

8.2.1 addClass()方法向被选元素添加一个或多个类名

该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

8.2.2 removeClass()方法从被选元素移除一个或多个类

注意：如果没有规定参数，则该方法将从被选元素中删除所有类。

8.3 操作html代码/文本/值

8.3.1 html()方法设置或返回被选元素的内容（innerHTML）

当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。

8.3.2 val() 设置或返回被选元素的属性值（针对表单元素）

val() 方法返回或设置被选元素的 value 属性。
当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。

注意：val() 方法通常与 HTML 表单元素一起使用。

8.4 使用方法（源码）

1）读取第一个div的title属性

<script src="js/jquery-1.10.1.js"></script>
<script>
    //jquery读写合一的特性  只有一个参数的方法 不传递参数的时候 节点.html()
    //                     有两个参数的方法   传递一个参数为读 两个参数的时候为写 css()  attr() 

    //1 读取第一个div的title属性
    console.log($("div:first").attr("title"))
    //思考原生js 得到属性
    document.getElementById("div1").title
    document.getElementById("div1").getAttribute("title")
    document.querySelector("#div1").title
</script>

2）给所有的div设置name属性(value值为huashan)

<script>
    //2 给所有的div设置name属性(value值为huashan)
    $("div").attr("name","huashan")
    //思考原生js 设置属性
    document.getElementById("div1").setAttribute("name","zhagnsan")
</script>

3）获取data-id和data-name自定义属性

<script>
    //3 获取data-id和data-name自定义属性
    console.log($("div:first").attr("data-id"))
    console.log($("div:first").attr("data-name"))
    //思考原生js
    //console.log(document.getElementById("div1").data-id) //错误
    console.log(document.getElementById("div1").getAttribute("data-id"))//自定属性 只能通过方法获取
</script>

4）移出所有的div为title的属性

<script> 
    //4 移出所有的div为title的属性
    $("div").removeAttr("title")
    //思考原生js
    //document.getElementById("div1").removeAttribute("title")
</script>

5）给所有的div都加上class=abc

<script>
    //5 给所有的div都加上class=abc
    $("div").addClass("abc")
</script>

6）移出所有的class=box

<script>
    //6 移出所有的class=box
    $("div").removeClass("box")
</script>

7）得到最后一个li的文本

<script>
    //7 得到最后一个li的文本
    console.log($("ul li:last").html())
</script>

8）得到输入框中的表单的值

<script>
    //8 得到输入框中的表单的值
    console.log($(":text").val())
</script>

9）将name="username"值设置成huashan

<script>
    //9 将name="username"值设置成huashan 
    $("input[name=username]").val("huashan")
</script>

10）点击全选按钮全选

<script>
    //10 点击全选按钮 全选
    //attr 用来操作标签自定义属性(包含w3c标准和自定义)的  比如title class id name
    //prop 用来操作元素固有属性的 布尔值属性
    //其他方面都没有什么区别  区别主要在checkbox的获取值的不同
    console.log($("button:first").attr("title"))  //选中
    console.log($("button:first").prop("title"))  //选中

    console.log($(":checkbox:first").attr("checked")) //undefined
    console.log($(":checkbox:first").prop("checked")) //false

    $("button:first").click(function(){
        $(":checkbox").prop("checked",true)
    })
</script>

11）点击不全选

<script>
    //11 点击不全选 
    $("button:last").click(function(){
        $(":checkbox").prop("checked",false)
    })
</script>

星灭233

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JQuery总结

文章目录

前言

引入的jQuery库必须写在最前面！！！

1 初识jQuery（与原生js比较）

1.1 方式一 通过原生js获取表单中的内容

1.2 方式二 通过引用jquery库再调用其方法

2 jQuery核心函数

3 jQuery核心对象

4 jQuery中的基本选择器

4.1 id选择器

4.2 类选择器

4.3 标签选择器

4.4 并集选择器

4.5 交集选择器

5 jQuery中的层次选择器

5.1 ancestor descendent

5.2 parent> child

5.3 prev+next

5.4 prev~siblings

5.5 源码

6 jQuery中的过滤选择器

7 工具方法

7.1 $.each 遍历数组或者对象中的数据

7.2 $.trim() 取出字符串两边的空格

7.3 $.type(obj) 得到数据的数据类型

7.4 $.isArray(obj) 判断是否是数据

7.5 $.isFunction(obj) 判断是否是函数

7.6 $.parserJSON(json) 解析json字符串为js对象/数组

8 属性

8.1 操作任意属性

8.1.1 attr()方法设置或返回被选元素的属性和值

8.1.2 removeAttr()方法从被选元素移除一个或多个属性。

8.1.3 prop()设置或返回被选元素的属性/值

8.1.4 二者的区别。

8.2 操作class属性

8.2.1 addClass()方法向被选元素添加一个或多个类名

8.2.2 removeClass()方法从被选元素移除一个或多个类

8.3 操作html代码/文本/值

8.3.1 html()方法设置或返回被选元素的内容（innerHTML）

8.3.2 val() 设置或返回被选元素的属性值（针对表单元素）

8.4 使用方法（源码）

1） 读取第一个div的title属性

2）给所有的div设置name属性(value值为huashan)

3）获取data-id和data-name自定义属性

4）移出所有的div为title的属性

5）给所有的div都加上class=abc

6）移出所有的class=box

7）得到最后一个li的文本

8）得到输入框中的表单的值

9）将name="username"值设置成huashan

10）点击全选按钮 全选

11）点击不全选

1.1 方式一通过原生js获取表单中的内容

1.2 方式二通过引用jquery库再调用其方法

1）读取第一个div的title属性

10）点击全选按钮全选