不正经

这个屌丝很懒，什么也没留下！

热门标签

jQuery基础知识_jqrrc

作者：不正经 | 2024-05-15 17:34:05

踩

jqrrc

一、jQuery简介

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。

jQuery 库包含以下功能：

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

提示： 除此之外，jQuery 还提供了大量的插件。

二、jQuery的语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法： $(selector).action()

使用美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 是执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 元素
$("p.test").hide() - 隐藏所有 class="test" 的 元素
$("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件

大家也许早已注意到这么一种现象，jQuery的所有函数均位于(document).ready()函数中

如下：

$(document).ready(function(){

// 开始写 jQuery 代码...

});

或者

$(function(){

// 开始写 jQuery 代码...

});

这是为了保证在 DOM 加载完成后才对 DOM 进行操作，否则操作可能失败。例如：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

补充：

其实以上所说的(document).ready()函数其实是jQuery的入口函数，那么jQuery入口函数和原生js的入口函数（window.onload 事件)有什么区别呢？

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
jQuery如果编写了多个入口函数，后面的不会覆盖前面的

三、jQuery对象

　jQuery 对象是一个类数组对象，是通过 jQuery 包装 DOM 对象后产生的对象。jQuery对象可以调用jQuery.prototype中声明的方法，DOM 对象则不能调用。


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>jquery对象</title>
</head>
 
<body>
    <p id="p1"></p>
    <p id="p2"></p>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        $(function () {
            var p1 = document.getElementById("p1");// dom对象
            p1.innerHTML = "我是核心DOM的方法";
            var p2 = document.getElementById("p2"); // dom对象
            p2.html("我是jquery函数库中的方法！") //  DOM 对象也无法使用任何 jQuery 的方法
 
        })
 
 
    </script>
</body>
 
</html>

如何创建jQuery对象？？

使用 jQuery()或$() 构造函数创建 jQuery 类型的对象。

1.对已经获得的DOM对象进行封装


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <p id="p1"></p>
    <p id="p2"></p>
    <script>
        $(function () {
            var p1 = document.getElementById("p1");
        p1 = $(p1); // 将dom对象封装为jquery对象
        p1.html("我是jquery函数库中的方法！") // 可以使用
        })
        
    </script>
</body>
</html>

2.对使用选择器查找的 DOM 元素进行封装。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <p id="p2"></p>
    <script>
        $(function () {
            var p2 = $("#p2");//封装为jquery对象
        p2.html("我是jquery函数库中的方法")
        })
        
    </script>
</html>

jQuery对象转成dom对象

jQuery()[index]或$() [index]

jQuery().get(index)或$().get(index)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <button type="button">我是btn1</button>
<button type="button">我是btn2</button>
<script>
    $(function () {
        var domObj1 = $('button')[0]; // 拆解为DOM对象
    domObj1.innerHTML="[]使用DOM对象的API修改内容";
    var domObj2 = $('button').get(1); // 拆解为DOM对象
    domObj2.innerHTML="()使用DOM对象的API修改内容1";
    })
    
 
</script>
</html>

四、jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1.jQuery元素选择器

jQuery 元素选择器基于元素名选取html元素。

$("p") 选取 元素。

2.jQuery id选择器

元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

$("#demo") 选取所有 id="demo" 的元素。

$("p#demo") 选取所有 id="demo" 的 元素。

3.jQuery class选择器

$(".intro") 选取所有 class="intro" 的元素。

$("p.intro") 选取所有 class="intro" 的 元素。

4.jQuery css选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

例：


<html>
<head>
<script type="text/javascript" src="./jquery-3.6.0.js"></script>
<script>
$(function(){
  $("button").click(function(){
    $("p").css("color","red");
  });
});
</script>
</head>
 
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
 
</html>

如需完整的参考手册，请访问我们的 jQuery 选择器参考手册。

五、jQuery事件

1.jQuery事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

如下例子，页面中指定一个点击事件：

$("p").click(function(){ // 动作触发后执行的代码!! });

2.事件绑定和事件解绑

2.1 on()

在选择元素上绑定一个或多个事件的事件处理函数。

参数：

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

on(events-map,[selector],[data])

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。如：({event:function, event:function, ...})

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

实例：

单击p标签时在弹框中显示该段落的文本：


$("p").on("click", function(){
alert( $(this).text() );
});

将数据传递给事件处理程序：


function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

取消表单提交操作并通过返回false防止事件冒泡：

$("form").on("submit", false)

使用.preventDefault（）仅取消默认操作：


$("form").on("submit", function(event) {
  event.preventDefault();
});

使用.stopPropagation（）停止提交事件冒泡（不会阻止表单提交）：


$("form").on("submit", function(event) {
  event.stopPropagation();
});

一个元素绑定不同事件不同方法：


$("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");},
    click:function(){$("body").css("background-color","yellow");}  
  });

2.2 off()

在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用on()绑定的事件处理程序。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

参数：

off(events,[selector],[fn])

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上，或特殊值false.

off(events-map,[selector])

events-map:一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示先前事件绑定的处理函数。

selector:一个最初传递到.on()事件处理程序附加的选择器。

实例：

从所有段落中删除所有事件处理程序：

$("p").off()

仅删除一个以前绑定的处理程序：


var foo = function () {
  // 事件处理代码
};
 
// ... 现在，单击p标签时将调用foo ...
$("body").on("click", "p", foo);
 
 
// ... foo将不再被调用。 
$("body").off("click", "p", foo);

按命名空间解除所有委托事件处理程序的绑定：


var validate = function () {
  // 验证表单条目的代码
};
 
// 在“.validator”命名空间下委托事件
$("form").on("click.validator", "button", validate);
 
$("form").on("keypress.validator", "input[type='text']", validate); 
 
// 删除“.validator”命名空间中的事件处理程序
 
$("form").off(".validator");

2.3 bind()

为每个匹配元素的特定事件绑定事件处理函数。

参数：

bind(type,[data],fn)

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

bind(type,[data],false)

type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

实例：

当被点击的时候，弹出其文本


$("p").bind("click", function(){
  alert( $(this).text() );
});

同时绑定多个事件类型


$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

你可以在事件处理之前传递一些附加的数据


function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为


$("form").bind("submit", function(event){
  event.preventDefault();
});

通过使用 stopPropagation() 方法只阻止一个事件起泡。


$("form").bind("submit", function(event){
  event.stopPropagation();
});

2.4 unbind()

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数，则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数：

unbind(type,[fn])

type:删除元素的一个或多个事件,由空格分隔多个事件值。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

unbind(type,false)

type:删除元素的一个或多个事件,由空格分隔多个事件值

false:设置为false会使默认的动作失效。

实例：

将段落的click事件取消绑定

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入


var foo = function () {
  // 处理某个事件的代码
};
 
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 
 
$("p").unbind("click", foo); // ... 再也不会被触发 foo

3.事件类型（举例）

1.$(document).ready()

$(document).ready()方法允许我们在文档完全加载完后执行函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 (document).ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

2.click()

click()方法是当按钮点击事件被触发时会调用一个函数

3.dbclick()

当双击元素时，会发生dbclick事件

4.mouseenter()

当鼠标指针穿过元素时，会发生mouseenter事件

5.mouseleave()

当鼠标指针离开元素时，会发生mouseleave事件

6.mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

7.mouseup()

当元素上松开鼠标按钮时，会发生mouseup事件

8.hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

9.blur()

当元素失去焦点时，发生blur事件

10.keydown()

键盘事件：按键按下事件

11.keyup()

键盘事件：按键抬起事件

六、文档处理方法

1.插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter

append()

向每个匹配的元素内部追加内容。


 
    <p></p>
    <p></p>
    <script>
        $(function () {
            // $("p").append("<span>appent</span>")
            $("p").append(function (index, html) {
                return index
            })
        })
 
    </script>

appendTo()

把所有匹配的元素追加到另一个指定的元素元素集合中。


<p>I would like to say: </p>
<div></div><div></div>
<script>
    $(function () {
        $("p").appendTo("div");
    })
 
</script>

prepend()

向匹配元素集合中的每个元素开头插入由参数指定的内容。


<p>I would like to say: </p>
<script>
    $(function () {
        $("p").prepend("<b>Hello</b>");
    })
 
</script>

prependTo()

向目标开头插入匹配元素集合中的每个元素。


<p>I would like to say: </p><div id="foo"></div>
<script>
    $(function () {
        $("p").prependTo("#foo");
    })
 
</script>

after()

在匹配的元素之后插入内容。


<p>I would like to say: </p>
<script>
    $(function () {
        $("p").after("<b>Hello</b>");
    })
 
</script>

before()

在每个匹配的元素之前插入内容。


<p>I would like to say: </p><b id="foo">Hello</b>
<script>
    $(function () {
        $("p").before( $("#foo")[0] );
    })
 
</script>

insertBefore()

把匹配的元素插入到另一个指定的元素集合的前面。


<div id="foo">Hello</div><p>I would like to say: </p>
<script>
    $(function () {
        $("p").insertBefore("#foo");
    })
 
</script>

insertAfter()

把匹配的元素插入到另一个指定的元素集合的后面。


<p>I would like to say: </p><div id="foo">Hello</div>
<script>
    $(function () {
        $("p").insertAfter("#foo");
    })
 
</script>

2.包裹方法：wrap、unwrap、wrapAll、wrapInner

wrap()

把匹配的元素用指定的内容或元素包裹起来。


<p>I would like to say: </p>
<script>
    $(function () {
        $("p").wrap("<div class='wrap'></div>");
    })
 
</script>

unwrap()

移除并替换指定元素的父元素。


<div>
        <p>Hello</p>
        <p>cruel</p>
        <p>World</p>
    </div>
<script>
    $(function () {
        $("p").unwrap()
    })
 
</script>

wrapAll()

把所有匹配的元素用指定的内容或元素包裹起来。


 <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
 
    <script>
        $(function () {
            $("p").wrapAll("<div></div>");
        })
 
    </script>

wrapinner()

将每一个匹配的元素的子内容用指定的内容或元素包裹起来。


<p>Hello</p>
    <p>cruel</p>
    <p>World</p>
 
    <script>
        $(function () {
            $("p").wrapInner("<b></b>");
        })
 
    </script>

3.替换方法：replaceWith、replaceAll

replaceWith()

用新内容替换匹配的元素。


<p>Hello</p><p>cruel</p><p>World</p>
    <script>
        $(function () {
            $("p").replaceWith("<b>Paragraph. </b>");
        })
 
    </script>

replaceAll()

用匹配的元素替换所有匹配到的元素


 <p>Hello</p><p>cruel</p><p>World</p>
    <script>
        $(function () {
            $("<b>Paragraph. </b>").replaceAll("p");
        })
 
    </script>

结果如上

4.移除方法：empty、remove、detach

empty()

删除匹配的元素集合中所有的子节点。


<p>Hello, <span>Person</span> </p>
    <a href="#">and person</a>
 
    <script>
        $(function () {
            $("p").empty();
        })
 
    </script>

remove()

移除所有匹配的元素。


<p>Hello</p> how are <p>you?</p>
    <script>
        $(function () {
            $("p").remove();
        })
 
    </script>

detach()

从 DOM 中移除匹配元素集合


<p>Hello</p> how are <p>you?</p>
    <script>
        $(function () {
            $("p").detach();
        })
 
    </script>

结果如上

5.克隆方法：clone

clone()

创建匹配元素集合的副本。clone(true/false) true深克隆，能够克隆事件。默认是false 只能克隆结构


 <b>Hello</b><p>, how are you?</p>
    <script>
        $(function () {
            $("b").clone().prependTo("p");
        })
 
    </script>

七、jQuery属性操作方法

属性操作方法用于获得或设置元素的 DOM 属性。

addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

addClass()


<p>how are you?</p>
    <script>
        $(function () {
            $("p").addClass("selected1 selected2");
        })
 
    </script>

attr()


<img src="www" alt="">
    <script>
        $(function () {
            var val = $("img").attr("src");
            console.log(val);
        })
 
    </script>

hasClass()


<button>点击我</button>
    <p class="intro"></p>
    <p></p>
    <p></p>
    <script>
        $(function () {
            $("button").click(function () {
                alert($("p:first").hasClass("intro"));
            });
        })
 
    </script>

html()


<p>jQuery</p>
 
   <span></span>
    <script>
        $(function () {
           console.log($('p').html());
            $('span').html('javaScript')
        })
 
    </script>

removeAttr()


 <img src="test.jpg"/>
 
   <span></span>
    <script>
        $(function () {
            $("img").removeAttr("src");
        })
 
    </script>

removeClass()


 <p class="selected"></p>
   <span></span>
    <script>
        $(function () {
            $("p").removeClass("selected");
        })
 
    </script>

toggleClass()


 <p class="selected"></p>
   <span></span>
    <script>
        $(function () {
            $("p").toggleClass("selected");
            $("span").toggleClass("selected");
        })
 
    </script>

val()


 <input type="text" name="" id="">
    <script>
        $(function () {
            $("input").val('123');
        })
 
    </script>

八、jQuery静态方法

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法

1.数组及对象操作：each、map、toArray、merge

.each()

对 jQuery 对象进行迭代，为每个匹配元素执行函数。


<button>点击我</button>
    <ul>
        <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>
    
    <script>
        $(function () {
            $("button").click(function () {
                $("li").each(function () {
                    alert($(this).text())
                });
            });
            var obj = {
                name: 'zach',
                age: 18,
                height: '1.88'
            }
            // 第一个参数 要遍历的数组或对象 第二个参数 处理函数
            $.each(obj, function (key, value) {
                console.log(key, value);
            })
        })
 
    </script>

.map()

把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。


 <script>
        $(function () {
            console.log($.map([0, 1, 2], function (n) {
                return n + 4;
            }));
        })
 
    </script>

.toArray

把jQuery集合中所有DOM元素恢复成一个数组。


<li id="foo"></li>
        <li id="bar"></li>
    <script>
        $(function () {
            console.log($('li').toArray());
        })
 
    </script>

.merge

合并两个数组

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()


<script>
        $(function () {
            console.log($.merge( [0,1,2], [2,3,4] ));
        })
 
    </script>

2.测试操作：type、isEmptyObject、isPlainObject、isNumberic

.type	检测obj的数据类型。
.isEmptyObject	测试对象是否是空对象（不包含任何属性）。
.isPlainObject	测试对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。
.isNumberic	确定它的参数是否是一个数字。 $.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的

.type()

jQuery.type(true) === "boolean"
jQuery.type(3) === "number"
jQuery.type("test") === "string"
jQuery.type(function(){}) === "function"
jQuery.type([]) === "array"
jQuery.type(new Date()) === "date"
jQuery.type(/test/) === "regexp"

.isEmptyObject()


$.isEmptyObject({}) // true
$.isEmptyObject({ foo: "bar" }) // false

.isPlainObject()


$.isPlainObject({}) // true
$.isPlainObject("test") // false

.isNumberic


$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(0xFF);   // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5");  // true (指数符号字符串)
$.isNumeric(3.1415); // true
$.isNumeric(+10);    // true
$.isNumeric(0144);   // true (八进制整数文字 )
$.isNumeric("");     // false
$.isNumeric({});     // false (空对象)
$.isNumeric(NaN);    // false
$.isNumeric(null);   // false
$.isNumeric(true);   // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

3.字符串操作：param、trim

.param

将表单元素数组或者对象序列化。是.serialize()的核心方法。

在jQuery 1.3中，如果传递的参数是一个函数，那么用.param()会得到这个函数的返回值，而不是把这个函数作为一个字符串来返回。

在jQuery 1.4中，.param()会深度递归一个对象来满足现在脚本语言和框架，比如PHP， Ruby on Rails等。你可以通过jQuery.ajaxSettings.traditional = true; 来全局得禁用这个功能。

注意：因为有些框架在解析序列化数字的时候能力有限，所以当传递一些含有嵌套对象、数组的对象作为参数时，请务必小心！

在jQuery 1.4中，HTML5的input元素也会被序列化。

.trim

去掉字符串起始和结尾的空格。

param()


 <span id="results"></span>
    <script>
        $(function () {
            var params = { width: 1680, height: 1050 };
            var str = $.param(params);
            $("#results").text(str);
        })
 
    </script>

trim()


 <script>
        $(function () {
            console.log("  hello, how are you?  ");
            console.log($.trim("  hello, how are you?  "));
        })
 
    </script>

九、总结

jQuery的知识不仅仅这些，以上是本人对一些jQuery基础知识的总结归纳。

更具体的请参考以下内容：jQuery在线手册-jQuery API手册,jQuery参考手册,jQuery API手册,jQuery中文API手册

jQuery 教程

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/574172