【JavaScript】jQuery基础篇

TC_FANCY

已于 2024-01-21 10:11:01 修改

阅读量66

点赞数

分类专栏： javaweb 文章标签： javascript 学习笔记

于 2023-08-10 12:06:05 首次发布

本文链接：https://blog.csdn.net/qq_59400558/article/details/132205917

版权

javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的核心函数$()，包括其在不同参数下的使用，如页面加载完成后的回调、HTML字符串处理、选择器选择及DOM对象与jQuery对象的区别。此外，还涵盖了层级选择器、基本过滤选择器和属性过滤选择器的应用。

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

jQuery核心函数

$是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用$这个函数；

1.传入参数是[函数]时：页面加载完成之后，相当于window.load=function(){}

<script type="text/javascript" src="路径">
$(function(){
   alert("页面加载完成后") ;
});
</script>

2.传入的参数为html字符串时：会对我们创建这个html标签对象

$("<div>"+"<span>div-span1</span>"+"<span>

3.传入参数为选择器字符串时

($("#id属性值");id选择器，根据id查询

$("标签名")；标签名选择器，根据指定的标签名查询

var $btObj=$("#btnId")

4.传入参数为dom对象时：

将把这个dom对象转换为jQuery对象


appendTo：b.appendTo(a) 将b追加到a的内部的末尾，b是a的子元素
jQuery对象是对DOM对象进行jQuery($())包装后产生的对象。

Dom对象与JQuery对象

区别：

1、DOM对象是使用JavaScript方法获取页面中元素返回的对象，而jquery对象是使用jquery方法获取页面中元素返回的对象；

2、DOM对象只能访问DOM中预定义的方法，jquery对象只能调用jQuery提供的方法。

1.定义不同

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是DOM对象，不能使用jquery定义的方法。

var dom-elem = document.getElementById("msg")

jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。可以使用jquery定义的方法。

var jquery-elem = $("#msg")

2.获取不同

DOM对象是document.getElement来获取dom对象，DOM对象只能访问DOM中预定义的方法。

jQuery对象就是通过$()对象处理返回的对象，该对象是jQuery的数组，只能调用jQueryr提供的方法。

3.jQuery对象的本质是什么？

jQuery对象的本质是dom对象的数组+jQuery提供的一系列功能函数

4.jQuery对象与dom对象的转换

//dom对象转换为jQuery对象
var $obj=$(dom对象);
//jquery对象转换成为相应dom对象
var dom=$obj[下标];
$(document.getElementById("testDiv"))[0];

jQuery选择器

层级选择器

$("ancestor descendant")

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

$("form input")

$("parent>child")

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

$("form>input ")

$("prev+next")

#匹配所有紧凑在prev的next元素

$("form input")

$("prev~sibling")

#匹配prev元素之后的所有sibling

$("form~input")

拓展：$（document）.read(function(){

        //在这里写代码

        })；

等价于

        $(function(){

        //写代码

        })

基本过滤选择器

$("li:first")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>练习两年半</title>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //点击事件
                $("#btn").click(function(){
                    //点击按钮之后第一是红色，其次所有为蓝色
                    $("ul>li:first").css("color","red").siblings().css("color","aquamarine")
//first方法获取第一个为红色，siblings方法获取除了被选中元素之外所有的同级元素为蓝色。
                    
                })
            });
        </script>
    </head>
    <body>
        <ul>
            <li>椿</li>
            <li>山梦</li>
            <li>海洋之露</li>
            <li>琼</li>
            <li>穆回</li>
        </ul>
        <button id="btn">按钮</button>
    </body>
</html>

&("li:last")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>练习两年半</title>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //点击事件
                $("#btn").click(function(){
                    //点击按钮之后第一是红色，其次所有为蓝色
                    $("ul>li:last").css("color","red").siblings().css("color","aquamarine")
//last方法获取第一个为红色，siblings方法获取除了被选中元素之外所有的同级元素为蓝色。
                    
                })
            });
        </script>
    </head>
    <body>
        <ul>
            <li>椿</li>
            <li>山梦</li>
            <li>海洋之露</li>
            <li>琼</li>
            <li>穆回</li>
        </ul>
        <button id="btn">按钮</button>
    </body>
</html>

$(":not(selector)")

$(input:not(:checked))

$(:odd)或（:even）

$("tr:odd")
$("tr:even")

:eq(index)

匹配一个定索引值元素

$("tr:eq(1)")//查找第二行

：gt（index）或lt（index）

$("tr:gt(0)")
$("tr:lt(0)")

:header

匹配如h1,h2,h3之类的标题元素

$("header").css("background","#EEE")

：animated

匹配所有正在执行动画效果的元素

$("#run" ).click(function(){
    $("div:not(:animates)").animate({left:"+=20"},1000);

})

内容过滤器

:contains

匹配包含给定的文本元素

html
<div>John Resing</div>
<div>J.R</div>
js
$("div:contains("John")")

:empty

匹配所有不包含子元素或者文本的空元素

html
<table>
<tr><td>hh</td><td></td></tr>
</table>
js
$("td:empty")

:parent

匹配含有子元素或者文本的元素

$("td:parent")

:has(selector)

匹配含有选择器所匹配的元素

html
<div><p>Hello</p></div>
<div>hello wei</div>
js
//给所有包含p元素的div元素添加一个test类
$("div:has(p)").addClass("test")

属性过滤选择器

[attribute]

hmtl
<div>
<p>hello</p>
</div>
<div id="test1"></div>
js
&("div[id]")

[attribute=value]

js
$("div[id="test1"]")

[attribute!=value]

js
$("div[id!="test1"]")

TC_FANCY

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录