首页 > 代码库 > jquery基础

jquery基础

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基础