jQuery 语法知识

糖糖糖果88

已于 2024-01-21 20:18:15 修改

阅读量836

点赞数 22

分类专栏： jQuery 文章标签： jquery 前端 javascript

于 2024-01-18 17:33:00 首次发布

本文链接：https://blog.csdn.net/m0_59329828/article/details/135669911

版权

jQuery 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.官网：

http://jQuery.com

2.引用

下载所需压缩文件包

创建文件保存在

<script src= '文件地址'> <script>

所写的js文件要在jQuery文件引用链接下

3.基础语法 :

$ ( srlector ) .action ( )

(1)美元符号$定义jQuery

(2)选择符(selector)“查询”和“查找”HTML元系

(3)jQuery的action ( )执行对元案的操作

例：

$(document).ready(function(){

alert("文档加载完毕”）}）

加载文档完成后就会触发后面的函数

例：

$(document).ready(function(){

$('p').click（function{

$(this).hide()

}）

}）;

加载文档完成后就会触发后面的函数,点击那个p标签，那个就隐藏

$(function(){

}）

表示文档加载完成，不包含图片等

4.基础选择器

1.All Selector(“*”)

描述:选择所有元素

语法 :S("*")

注意:实践证明，由于使用"选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

例：

$(function(){

$("div*").html("我们是一家人");

})

表示选择所有div子元素，将标签内容改为：我们是一家人

2.Class Selector(".class")

描述:选择给定样式类名的所有元素

语法: $(".class")

例：

$(function(){

$(".s").html("我们是一家人");

})

表示选择类名为s的元素，将标签内容改为：我们是一家人

3.Element Selector ("element")

描述:根据给定(html)标记名称选所有的元素

语法:$("element”)

例：

$(function(){

$("span").html("我们是一家人");

})

4.ID Selector(*#id")

描述:选择一个具有给定id属性的单个元素。

语法:$("#id")

例：

$(function(){

$("#name").html("我们是一家人");

})

5.Multiple Selector ("selector1, selector2, selectorN‘’）

描述:将每一个选择器匹配到的元素合并后一起返回

语法:$("selector1, selector2, selectorN")

例：

$(function(){

$("p，span，label").html("我们是一家人");

})

5.属性选择器

1.Attribute Contains Prefix Selector [name ="value"]

描述:选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后限一个连字符”” )的元素。

语法: $("[attribute='value']")

注意:引号是可选的.可以是一个不带引号的一个单词或带一个引号的字符串。

例：

$(function(){

$("[hreflang=en]") .css("color","red");

})

将属性为hreflang=en的标签文字颜色变为红色

2.Attribute Contains Selector [name*="value"]

描述:选择指定属性具有包含一个给定的子字符申的元素。(选择给定的属性是以包含某些值的元奈)

语法:$("[attribute*='value']”)

例：

$(function(){

$("[p*='hello']") .css("color","red");

})

3.Attribute Contains Word Selector [name- ="value"]

描述:选择指定属性用空格分隔的值中包含一个给定值的元素

语法:$([attribute~='value]”)

例：

$(function(){

$("input[name~='man']") .val('mr.man is in it!');

})

4 Attribute Ends With Selector [name$="value"]

描述:选挥指定属性是给定值的元素。

语法:$("[attribute='value'T)

5 Attribute Not Equal Selector [name!="value"]

描述:选择不存在指定属性，或者指定的属性值不等于给定值的元素

请法:$("[attribute!='value]")

6.Attribute Ends With Selector [name$-"value"]

描述:选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。

语法 : $("[attribute$='value]")

7.Attribute Starts With Selector [name^ ="value"]

描述:选指定属性是以给定字符串开始的元素

语法:$("[attribute^='value]”)

8.Has Attribute Selector [namel]

描述:选择所有具有指定属性的元素，该属性可以是任何值

语法: $("[attribute]')

9.Multiple Attribute Selector [name="value"][name2="value2"]

描述:选择匹配所有指定的属性筛选器的元素。

语法:$("[attributeFilterl]lattributeFilter2][attributeFilterN]")

6.基础过滤

1. :animated Selector

描述:选择所有正在执行动画效果的元素

语法:$(":animated")

例：$("div:animated").toggleClass("colored");

    <script>
    $(function(){
            // 选择id为run的元素  添加一个点击事件
        $("#run").click(function(){
            // 选择正在执行动画的div元素 给他一个类名colored
            $("div:animated").toggleClass("colored");
        });
        // 设置一个动画函数  函数名为animatedIt
        function animatedIt(){
            // 选择id为mover的元素 添加一个动画  
            // slideToggle表示用滑动动画显示或者隐藏一个元素
            // slideToggle  动画参数 slow表示延迟时间600毫秒，第二个参数为函数名，不需要（）
            $("#mover") .slideToggle("slow",animatedrt);
        }
        // 调用这个函数
        animatedit();
    })
    </script>

2. :eq ( ) Selector

描述:在匹配的集合中选择索值为index的元素

语法:

(1)$(":eq(index)"): index: 要匹配元素的索引值(从0开始计数)

(2)$(:eq(-index)"):-index要匹配元素的索引值(从0开始计数)从最后一个元素开始倒计数。

3. :even Selector

描述:选择索引值为偶数的元素，从0开始计数。也可以查看odd(奇数)

语法:$(":even")

注意:这是基于0的索引，

所以even选择器是选择第一个元素，第三个元素，依此类推在匹配

所以odd选择器是选择第二个元素，第四个元素，依此类推在匹配

4. :first Selector

描述:选择第一个匹配的元素。

语法 : $(":first" )

5. :focus Selector

描述:选择当前获取焦点的元素

语法:$(":focus")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .focused{
            background-color: red;
        }
    </style>
    <script src="jQuery.js" ></script>
</head>
<body>
    <div id ='content'>
        <input>
        <input>
        <select>
            <option >select menu</option>
        </select>
        <div>
            a div
        </div>
    </div>
    <script>
        $( "#content" ).delegate( "*", "focus blur", function( event ) {
            var elem = $( this );
            setTimeout(function() {
               elem.toggleClass( "focused", elem.is( ":focus" ) );
            }, 0);
        });
    </script>
</body>
</html>

注意函数名的大小写，如toggleClass不能写成toggleclass，要不然就识别不到函数

报错为：

6. :header Selector

描述:选择所有标题元素，像h1,h2h3等

语法:$(":header")

7. :last Selector

描述:选挥最后一个匹配的元素。

语法 :$(":last")

8. :gt（）Selector

描述:选择匹配集合中所有大于给定index(索值)的元素。

语法 : $(":gt(index)") 或 (":gt(-index）

9. :lt（） Selector

注意：l为小写的L，不是大写的i

描述:选择匹配集合中所有索引值小于给定index参数的元素

语法 : $(":lt(index)") 或 S(":lt(-index)")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.js" ></script>
</head>
<body>
    <table border="1">
        <tr><td>TD#0</td><td>TD#1</td><td>TD#2</td></tr>
        <tr><td>TD#3</td><td>TD#4</td><td>TD#5</td></tr>
        <tr><td>TD#6</td><td>TD#7</td><td>TD#8</td></tr>
    </table>

    <script>
        $(function(){
            $('td:lt(4)').css("color","red");
        })
    </script>
</body>
</html>

效果

10.:not() Selector

描述:选择所有元素去除不匹配给定的选择器的元素。

语法: $(":not(selector)")

糖糖糖果88

关注

22
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
jQuery 语法知识

(2)$(:eq(-index)"):-index要匹配元素的索引值(从0开始计数)从最后一个元素开始倒计数。$("p，span，label").html("我们是一家人");(1)$(":eq(index)"): index: 要匹配元素的索引值(从0开始计数)语法 : $(":lt(index)") 或 S(":lt(-index)")$("span").html("我们是一家人");语法 : $(":gt(index)") 或 (":gt(-index）$(".s").html("我们是一家人");
复制链接

扫一扫