jquery基础

2021-06-20 06:03

阅读:631

标签:word   等于   function   head   标记   multiple   注意   char   rman   

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>hahaa>
        b>heiheib>
    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基础

标签:word   等于   function   head   标记   multiple   注意   char   rman   

原文地址:http://www.cnblogs.com/yangfanasp/p/7190632.html


评论


亲,登录后才可以留言!