無.Flac's Blog

無.Flac

Jquery

JavaScript
35
2025-03-09

jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单。“写更少的代码，做更多的事儿”是jQuery一直坚信的开发理念。

>引入jQuery

官方下载

<scripts src="path/to/jquery.xx.js" > </script>

引入 jQuery 库，实际就是向网页添加了一个新的函数$(jQuery)。

$ 是 jQuery 中的核心函数，jQuery 的所有功能都是通过该函数来进行的，

>jQuery 的核心函数

作为工具使用

  • jQuery.contains()

  • jQuery.isArray()

  • jQuery.isFunction()

  • jQuery.isNumeric()

  • ……

var num = 10
fuction fn(){}
console.log($.isFunction(num)) // false
console.log($.inFunction(fn))  // true

作为函数使用

  • 将一个函数作为$的参数，这个函数会在文档加载完毕之后执行，相当于document.addEventListener("DOMContentLoaded",function(){})

$(function(){
  alert("核心函数执行了~~")
}) //文档加载完毕后执行

alert("核心函数外部~~")

  • 将选择器字符串作为参数，jQuery 自动去网页查找元素。类似于document.querySelectorAll("...")

<button id="btn"></button>
<button id="btn01"></button>
$(function(){
  $("#btn").click(function(){
    alert("你点了我哦~")
  })
})

需要注意的是，通过 jquery 核心函数查询到的结果并不是原生 DOM，而是经过包装的新对象，我们称之为 jquery 对象。

jquery对象中为我们提供了很多新的方法，方便我们做各种DOM 操作 ，但是jquery对象不能直接调用原生 DOM 对象的方法。

通过我们为 jquery 对象命名时，会使用$开头加以区分。

var $box1 = $("#box1") // 获取id为box1的元素
var $news = $(".news") // 获取class为news的元素
var $hello = $("[title=hello]") // 获取title属性为hello的元素
$(function () {

    $("#btn").click(function () {

        // alert("你点我干嘛~~")

        var btn = document.getElementById("btn01"); // [object HTMLButtonElement]

        var $btn = $("#btn01"); // [object Object]

    });
});

将 DOM 对象作为参数

可以将 DOM 对象转换为 jquery 对象，从而使用 jquery 对象的方法。

var box1 = document.getElementById("box1") // 获取DOM对象
var $box1 = $(box1) // 转换为jQuery对象
 $(function () {

    $("#btn").click(function () {

        // alert("你点我干嘛~~")

        var btn = document.getElementById("btn01"); // [object HTMLButtonElement]

        var $btn = $("#btn"); // [object Object]
        
        alert($(btn))

    });
});

将 HTML 代码作为参数

会根据 html 代码来创建元素

$(function () {

    $("#btn").click(function () {

        var $h1 = $("<h1>我是一个标题</h1>"); // 会根据html代码创建元素

        $("div").append($h1);

    });
});

>jQuery对象

通过 jQuery 核心函数获取到的对象就是jQuery对象。

jQuery对象是jQuery中定义的对象，可以将其理解为是DOM对象的升级版；在jQuery对象中为我们提供了很多简单易用的方法，来帮助我们简化DOM操作。

- jQuery对象本质上是一个DOM对象的数组（类数组）
  可以通过索引获取jQuery对象中的DOM对象

<button id="btn01">点我一下</button>
<ul>
    <li id="swk">孙悟空</li>
    <li id="zbj">猪八戒</li>
    <li>沙和尚</li>
    <li>唐僧</li>
    <li>白骨精</li>
</ul>

<script>
  $("#btn01").click(function () {
      var $li = $("li")
      // alert($li[0].textContent)
      
      var text = $li.text() // 读取文本，返回所有标签中的文本
      var id = $li.attr("id") // 读取属性时，返回第一个标签的属性
      alert(id)
  })
</script>

隐式迭代

当我们修改jQuery对象时，它会自动修改jQuery中的所有元素，这一特点称为jQuery的隐式迭代。

<script>
  $("#btn01").click(function () {
      var $li = $("li")    
      $li.text("新的文本内容")
  })
</script>

链式调用

通常情况下，jQuery对象方法的返回值依然是一个jQuery对象。所以我们可以在调用一个方法后，继续调用其他的jQuery对象的方法。这一特性，称为jQuery对象的 链式调用

<script>
  $("#btn01").click(function () {
      var $li = $("li")
      $li.text("新的文本内容").css({"color":"red"})
  })
</script>

>选择器集合

基础选择器

选择器

名称

举例

id选择器

$("ID属性值")

选择 id 为指定的元素对象

类选择器

$(".class属性值")

选择 class 为指定值的元素

元素选择器

$("标签名/元素名")

选择所有指定标签元素的对象

选择所有元素

$("*")

选中页面中所有的元素的对象

组合选择器

选择器1，选择器2...

选择指定选择器中的元素对象

<div id="mydiv1" class="blue">元素选择器</div>
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<span class="blue">样式选择器</span>
<script>

// id选择器
var $mydiv = $("#mydiv");
console.log($mydiv)

// 类选择器
var $class = $(".blue")
console.log($class)

// 元素选择器
var $span = $("span")
console.log($span)

// 通用选择器
var $all = $("*")
console.log($all)

</script>

层次选择器

选择器

名称

举例

后代选择器

$("父元素 指定元素")

选择父元素的所有指定元素(包含第一代、第二代)

子代选择器

$("父元素 > 指定元素")

选择父元素的所有第一代指定元素

相邻选择器

$("元素 + 指定元素")

选择元素下一个指定元素(如果元素不存在，则获取不到)

同辈选择器

$("元素 ~ 指定元素")

选择元素下面的所有指定元素

表单选择器

Forms

名称

举例

表单选择器

:input

查找所有的input元素：$(":input")；

注意：会匹配所有的input、textarea、select和button元素。

文本框选择器

:text

查找所有⽂本框：$(":text")

密码框选择器

:password

查找所有密码框：$(":password")

单选按钮选择器

:radio

查找所有单选按钮：$(":radio")

复选框选择器

:checkbox

查找所有复选框：$(“:checkbox”)

提交按钮选择器

:submit

查找所有提交按钮：$(“:submit”)

图像域选择器

:image

查找所有图像域：$(“:image”)

重置按钮选择器

:reset

查找所有重置按钮：$(“:reset”)

按钮选择器

:button

查找所有按钮：$(“:button”)

⽂件域选择器

:file

查找所有⽂件域：$(“:file”)

>操作属性的元素

获取属性 attr

固有属性：元素本身就有的属性(id、name、class、style)，返回值是 Boolean 的属性：checked、selected、disabled

自定义属性：用户自己定义的属性

方法

说明

attr(属性名)

设置/获取元素的指定属性

prop(属性名)

获取具有 true和false的属性值

所以，attr()和prop()的区别是什么?

  1. 如果是固有属性，attr 和 prop 方法均可操作。

  2. 如果是自定义属性，attr 可操作，prop 不可操作。

  3. 如果返回值是 boolean 类型的属性，若设置了属性，attr 返回具体的值，prop 返回 true，反之 undefined 和 false。

<input abd="aabbcc" checked="checked" id="aa" name="ch" type="checkbox"/> aa
<input id="bb" name="ch" type="checkbox"/> bb

<script>
    var name = $("#aa").attr("name");
    console.log(name); //ch
    var name2 = $("#aa").prop("name");
    console.log(name2); //ch
    // 返回值是 boolean 的属性 （元素设置了属性）
    var c1 = $("#aa").attr("checked");
    console.log(c1); //checked
    var c2 = $("#aa").prop("checked");
    console.log(c2); //true
    // 返回值是 boolean 的属性 （元素未设置属性）
    var c3 = $("#bb").attr("checked");
    console.log(c3); //undefined
    var c4 = $("#bb").prop("checked");
    console.log(c4); //false
    // 自定义属性
    var abc1 = $("#aa").attr("abd");
    console.log(abc1); //aabbcc
    var abc2 = $("#aa").prop("abd");
    console.log(abc2); //undefined
</script>

设置属性 prop

<input abd="aabbcc" checked="checked" id="aa" name="ch" type="checkbox"/> aa
<input id="bb" name="ch" type="checkbox"/> bb

<script>
    // 固有属性
    $('#aa').attr("value", "123");
    $('#bb').prop("value", "456");
    // 返回值是 boolean 的属性
    $('#aa').attr("checked", false);
    $('#bb').prop("checked", "checked");
    // 自定义属性
    $('#aa').attr("username", "admin");
    $('#bb').prop("username", "guest"); // prop() 不会解析 boolean 值
</script>

移除属性 removeAttr

方法

说明

removeAttr(”属性名“)

移除元素的指定属性

<script>
    var name = $("#aa").removeAttr("checked");
</script>

总结：

如果属性的类型是 boolean，则使用 prop( )方法，反之使用 attr( )方法。

>操作元素的样式

方法

说明

attr("class")

获取 class 属性的值，即样式名称

attr("class","样式名")

修改 class 属性的值，会覆盖原始样式

addClass(”样式名“)

添加样式的名称

css( )

添加具体的样式

removeClass("样式名")

移除样式名称

添加元素的具体样式

1)）css({'样式名':'样式值'，'样式名2','样式值2'})

例：css({'background-color':'red','color':'#fff'});

2）css('样式名','样式值')

例：css('color','white')

<script>
    $("#aa").attr('color','blue');
    $("#aa").addClass('px-2');
    $("#aa").css({'background-color':'red','color':'#fff'});
    $("#aa").removeClass("px-2")
</script>

>操作元素的内容

方法

说明

html( )

获取元素的 html 内容（非表单元素）

html("html","内容")

设置元素的 html 内容（非表单元素）

text( )

获取元素的文本内容，不包含 html（非表单元素）

text("html","内容")

设置元素的文本内容，不包含 html （非表单元素）

var( )

获取元素value 值（表单元素）

var('值')

设定元素的 value 值（表单元素）

表单元素：

文本框 text；密码框 password；单选框 radio；复选框 checkbox；隐藏域 hidden；文本域 textarea；下拉框select

非表单元素：

div；span；h1~h6；ul；li...

<div id="html1"></div>
<div id="html2"></div>
<div id="text"></div>
<input type="text" name="username" id="oop" value="oop" /> 

<script>
    // 非表单元素
    $("#html1").html("青岛");
    $("#html2").html("<h2>TsingTao<h2>");
    $("#text").text("山东") //山东
    $("#text").text("<h2>TsingTao<h2>") // <h2>TsingTao<h2>
    // 表单元素
    $("#oop").var("青岛啤酒")
</script>

>创建与添加元素

创建元素

方法

说明

$('元素内容')

$('<p>欢迎来到青岛</p>')

<script>
    var p = $('<p>欢迎来到青岛</p>')
</script>

添加元素

方法

说明

(指定元素).prepend("内容")

在指定元素内部的最前面追加内容

$("内容").prependTo("指定元素")

把内容追加到指定元素内部最前面

(指定元素).append"内容")

在指定元素内部最后面追加内容

$("内容").appendTo("指定元素")

把内容追加到指定元素内部最后面

$("元素").before( )

在指定元素的前面追加内容

$("元素").after( )

在指定元素的后面追加内容

$("元素").wrap()

为当前元素添加一个容器

$("元素").wrapAll()

为当前所有元素统一添加一个容器

$("元素").wrapInner()

为当前元素添加一个内部容器

<div id="html"></div>
<div id="text"></div>

<script>
    // 创建元素
    var test = "<span class='bg-black text-sm'>china</span>"
    $("html").prepend(test)
    $(test).prependTo("#html")

    var test2 = "<span class='bg-black text-sm'>TsingTao</span>"
    $("#text").before("test2")
</script>

>删除元素

方法

说明

$("元素").remove()

完全删除(事件清空)

$("元素").empty()

清空所有的子元素

$("元素").detach()

删除元素(不会清空事件)

$("元素").unwrap()

删除外层父元素

<div id="html"></div>
<div id="text"></div>

<script>
    $("html").remove()
    $("text").detach()
</script>

>复制元素

方法

说明

$("元素").clone()

用来复制 jQuery 对象

<button id="btn"> 点我一下 </button>

<ul id="list">
    <li>孙悟空</li>
    <li>猪八戒</li>
</ul>

<ul id="list2">
    <li>沙和尚</li>
    <li>唐僧</li>
</ul>


<script>
    $(function(){
    
        $("#list li:nth-child(1)").click(function(){
            alert("孙悟空")
        })
    
        var $swk = $("#list li:nth-child(1)").clone(true)
        var $list2 = $("#list2")
    
        $("#btn").click(function(){
            $list2.append($swk)
        })
    })  
</script>

>筛选方法

方法

说明

$("元素").eq( )

获取 jQuery 对象中指定索引的元素

$("内容").first( )

获取第一个元素

$("元素").last( )

获取最后一个元素

$("元素").even( )

获取索引为偶数的元素

$("元素").odd( )

获取索引为基数的元素

$("元素").slice( )

截取元素（切片）

$("元素").filter( )

过滤筛选元素

<button id="btn"> 点我一下 </button>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1 a"></div>
<div class="box1 a"></div>
<div class="box1"></div>

<script>
    $(function(){ 
        $("#btn").click(function(){
           $(".box1").eq()
           $(".box1").filter(".a").css("background-color", "#bfa")
        })
    })  
</script>

>事件绑定

通过@指定方法 

<a href="#">超链接</a>

<script>
    $(function(){ 
        $(".a").click(function(event){
             event.stopPropagation()
             event.preventDefault()
        })
    })  
</script>

通过 on( ) 方法

<button id="btn1"> 点我一下 </button>
<button id="btn2"> 点我一下 </button>

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

<script>
     // on()可以通过on()方法来绑定事件
     $("#btn1").on("click.a", function(){
          alert("通过on绑定的事件！")
     })

     // off()可以用来取消事件绑定
     $("#btn2").on("click.a", function(){
          $("#btn1").off("click")
     })
     // 为所有box1的类添加事件委托
     $(document).on("click",".box1", function(event){
         alert("哈哈")
     })  
</script>

通过 one( ) 方法

<script>
    // one()用来绑定一个一次性的事件
    $(".box1").one("click", function(){
        alert('嘻嘻')
    })
</script>

>jQuery方法

.addClass()

  • 为jQuery对象添加一个或多个class

.hasClass()

  • 检查jQuery对象是否含有某个class

.toggleClass()

  • 切换jQuery对象的指定class

.insertAfter()

  • 将元素添加到某元素的后边

.insertBefore()

  • 将元素添加到某元素的前边

.replaceAll()

  • 替换某个元素

.replaceWith()

  • 被某个元素替换

.height()

  • 读取/设置元素的高度

.width()

  • 读取/设置元素的宽度

.innerHeight()

  • 读取/设置元素的内部高度

.innerWidth()

  • 读取/设置元素的内部宽度

.outerHeight()

  • 读取/设置元素可见框的高度

.outerWidth()

  • 读取/设置元素可见框的宽度

.offset()

  • 读取/设置元素的偏移量

.position()

  • 读取元素相当于包含块的偏移量

.scrollLeft()

  • 读取/设置元素水平滚动条的位置

.scrollTop()

  • 读取/设置元素垂直滚动条的位置

.has()

  • 获取含有指定后代的元素

.is()

  • 检查是否含有某元素

.map()

  • 获取对象中的指定数据

.add()

  • 创建包含当前元素的新的jQuery对象

.addBack()

  • 将之前操作的集合中的元素添加到当前集合中

.contents()

  • 获取当前jQuery对象的所有子节点（包括文本节点）

.end()

  • 将筛选过的列表恢复到之前的状态

.not()

  • 从列表中去除符合条件的元素

.children()

  • 获取子元素

.closest()

  • 获取离当前元素最近的指定元素

.find()

  • 查询指定的后代元素

.next()

  • 获取后一个兄弟元素

.nextAll()

  • 获取后边所有的兄弟元素

.nextUntil()

  • 获取后边指定位置的兄弟元素

.offsetParent()

  • 获取定位父元素

.parent()

  • 获取父元素

.parents()

  • 获取所有的祖先元素

.parensUntil()

  • 获取指定的祖先元素

.prev()

  • 获取前边的兄弟元素

.prevAll()

  • 获取前边所有的兄弟元素

.prevUntil()

  • 获取指定的兄弟元素

.siblings()

  • 获取所有的兄弟元素

AJAX 「 ※ Learning ※ 」
JavaScript - BOM