首页 > 代码库 > jquery基础

jquery基础

2024-10-27 19:47:39   212人阅读

1.jquery语法

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

　　　　-1.美元符号$定义jquery

　　　　-2.选择符(selector)"查询"和"查找"HTML元素

　　　　-3.jQuery的action()执行对元素的操作

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    })
})

2.jquery基础选择器

　　1.All Selector("*")

　　　描述：选择所有元素

　　　语法：$("*")

　　　注意：由于选取的是所有元素，因此浏览器将会比较缓慢，这个选择器需要谨慎使用

　　2.Class Selector(".class")

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

　　　语法：$(".class")

　　3.Element Selector("element")

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

　　　语法：$("element")

　　4.ID Selector("#id")

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

　　　语法：$("#id")

　　5,Multiple Seletor(“selector1，selector2，selectorN”)

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

　　　语法：$(“selector1，selector2，selectorN”)

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
    <div>
        <span class="s"></span>
        <p></p>
        <label id="lab"></label>
        <h1></h1>
        <a>haha</a>
        <b>heihei</b>
    </div>
<script>
    $(function(){
        $("div *").html("we are family");
    })

    $(function(){
        $(".s").html("hello");
    })

    $(function(){
        $("p").html("world");
    })

    $(function(){
        $("#lab").html("yangf");
    })

    $(function(){
        $("a, b").html("prog");
    })
</script>
</body>
</html>

3.jquery的属性选择器
　　

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

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

　　　语法：$("[attribute|= ‘value‘]")

　　　注意：引号是可选的，可以是一个不带引号的一个单词或带一个引号的字符串

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

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

　　　语法：$("[attribute* = ‘value‘]")

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

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

　　　语法：$("[attribute ~= ‘value’]")

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

　　　描述：选择指定属性是给定值的元素

　　　语法：$("[attribute =‘value‘]")

　　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 Starts Selector [name]

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

　　　语法：$("[attribute]")

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

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

　　　语法：$("[attributeFilte1][attributeFilte2][attributeFilteN]")

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
    <a href="#" hreflang="en">英文</a>
    <a href="#" hreflang="zh">中文</a>
    <input name="man-news" id="man-news"/>
    <input name="milk man"/>
    <input id="letterman2" name="new-letterman"/>
    <input name="newmilk"/>
<script>
    $(function(){
        $("[hreflang = en]").css("color", "red");
    })

    $(function(){
        $("input[name~=‘man‘]").val(‘mr man is in it‘);
    })

    $(function(){
        $("input[id][name$=‘man‘]").val("only this one");
    })
</script>
</body>
</html>

 

jquery基础


联系
我们