首页 前端知识 jQuery 语法知识

jQuery 语法知识

2024-04-29 11:04:21 前端知识 前端哥 455 885 我要收藏

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)")

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6172.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!