• jQuery基础(未完待续)


    1.       jQuery核心函数

    jQuery也可写$,通常情况下$可能会与其他框架中的对象冲突(php$的用法),所以如果所用的框架没有$的用法,jQuery可用$代替

    1$(document).ready() 一般缩写为$(),参数为回调函数,文档就绪时触发,优先onload触发

          $(document).ready(function () {});

          $( function () {});

    2jQuery(elements) 将一个或多个dom对象转换为jQuery对象

    $(document.getElementById("txtName"))

             3)根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。

          $("<input type='checkbox'>").appendTo("body")

          $("<input>", { type: 'textfield' }).appendTo("body")

             4)检索器(多个检索条件同时满足时,检索表达式直接连接;满足其中某个时,检索表达式用", "连接。如[name="text"].divClass结果为样式为divClassnametext的元素)

             以下结合例子分析检索器的用法(为了简单叙述,检索结果用ID代替Dom元素)

                       Demo,有这样一段html代码,id0-8,有div元素及span元素:

                <div id="0" class="divClass">

                    <span id="1" title="this is a span">

                        <div id="2">value2</div>

                    </span>

                </div>

                <span id="3">3value</span>

                <div id="4">

                    <div id="5"></div>

                    <div id="8"></div>

                    <span id="6"></span>

                    <div id="7"></div>

                </div>

                       普通检索

         $("#id"): 根据给定的ID匹配一个元素。

    jsdocument.getElementById("")功能差不多,但也有区别:$获取到的是i指定idjQuery对象,后者获取到的是dom对象 $("#3")[0]document.getElementById("3")指的都是id3dom对象

    $("#3")获取的结果即为 3

        $("dom元素名"):根据给定的元素名匹配所有元素

    jsdocument.getElementByTagName ("")功能类似

    $("span")获取的结果即为 13

         $(".class样式名"): 根据给定的样式匹配元素。

    $(".divClass")获取的结果即为 0

         $("*") :匹配所有元素。结果为 012345678

    层级

         $("div div"): 在给定的祖先元素下匹配所有的后代元素。

    结果为 2578

        $(" div>div "):在给定的父元素下匹配所有的子元素啊

    结果为 578

        $("div+div"):匹配所有紧接在 div 元素后的 div 元素。

    结果为8

        $("div~div") :匹配 div 元素之后的所有 div (同级) 元素。

    结果为 478

    简单(该组检索表达式中,用到索引的都不考虑是否同级,索引依据出现的先后顺序)

        $("div:first") 匹配找到的第一个元素

    结果为0

    如果将例子该为:

                <span id="1" title="this is a span">

                    <div id="2">value2</div>

                </span>

                <div id="0" class="divClass">               

                </div>

                                则修改后的例子结果为 2

        $("div:last") 匹配找到的最后一个元素

    结果为 7

        $(" div:not(:first)") //返回除第一个div以外的所有div

    not的用法:如$("div>:not(span)");该例子表示不含有span节点的div节点集合,因为04都包含span节点,所以结果为5,7,8

        $(" div:even") 匹配所有索引值为偶数的元素,从 0 开始计数

    结果为048

        $(" div:odd") 匹配所有索引值为奇数的元素,从 0 开始计数

    结果为 257

        $(" div:eq(3)") 匹配一个给定索引值的元素 eq: equal

    结果为5

        $(" div:gt(3)") 匹配所有大于给定索引值的元素 gt:greater than

    结果为87

        $(" div:lt(3)") 匹配所有小于给定索引值的元素 lt:less than

    结果为024

    内容:

        $("div:contains('value')") 匹配包含给定文本的元素

    结果为02   innerText.indexOf("value")>=0[title*="value"]类似,区别在于,*=只能检索属性,contains检索元素包含的所有文本,注意检索的范围为元素的文本

        $("div:has(div)") 匹配所有包含 p 元素的 div 元素

    查找方式类似于层次查找的"div div",区别在于,"div div"结果是子节点,has结果是父节点,例子结果为04

    $("div:has(span[title$='span'])~div>div");选择器也可以像xpath一样方便

    上述例子可翻译为:含有span子元素且子span节点的title属性文本为"span"结尾的div元素之后(同级)的div元素的div子元素

    猛一看,罗里吧嗦的描述那么长,感觉用处不是很大,其实页面html内容庞大的情况下,查找符合某些条件的集合会很方便

        $("div:empty") 查找所有不包含子元素或者文本的空元素

    结果:587

                       可见性

        $("input:visible") 查找所有可见的input元素

        $("tr:hidden") 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到

    属性检索

        $("div[id]") 查找所有含有 id 属性的 div 元素

        $("input[name='newsletter']") 查找所有 name 属性是 newsletter input 元素

        $("input[name!='newsletter']") 查找所有 name 属性不是 newsletter input 元素

        $("input[name^='news']") 查找所有 name 'news' 开始的 input 元素

        $("input[name$='letter']") 查找所有 name 'letter' 结尾的 input 元素

        $("input[name*='man']") 查找所有 name 包含 'man' input 元素

        $("input[id][name$='man']") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

    子元素

        nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

        $("div:first-child") 查找属于父节点的第一个子节点的div元素

    结果为 025

        $("div:last-child")   查找属于父节点的最后子节点的div元素

    结果为247

        $("div:only-child")   查找属于父节点的唯一子节点的div元素

    表单

        $(":input") 查找所有的input元素 

    $(":input")$("input")的区别:

    //:input表示选择表单中的input,select,textarea,button元素,input仅仅选择input元素

        $("text")    匹配所有的单行文本框

        $(":password") 匹配所有密码框

        $("radio")   匹配所有单选按钮

        $("checkbox") 匹配所有复选框

        $("submit")   匹配所有提交按钮

        $("image")    匹配所有图像域

        $("button")   匹配所有按钮

        $("file")     匹配所有文件域

        $("hidden") 匹配所有不可见元素,或者typehidden的元素

    表单对象属性

        $("input:checked") 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

        $("input:enabled") 匹配所有可用元素

        $("input:disabled") 匹配所有不可用元素

        $("select option:selected") 匹配所有选中的option元素

    5)属性操作

          操作样式(class)

    方法名addClass,removeClass,toggleClass

    特殊用法toggleClass:如果存在(不存在)就删除(添加)一个样式

    当方法传递两个参数的时候,第二个参数为布尔表达式,布尔表达式为true时添加样式,布尔表达式为false时删除样式,如:

    var b = true;

                    $("input").click(function () {

                             //情况一:$(this).toggleClass("ccc");

                         //情况二:

                                         b = !b;

                         $(this).toggleClass("ccc", b);

                    });

          样式操作2style

    方法名css,参数分为3种情况

    Ø  传递一个参数,且为string类型,这样会返回该样式值,如

    $("input").css("background-color")

    Ø  传递两个参数,分别为key\value,为dom元素样式赋值,如

    $("input").css("color","blue")

    Ø  传递一个参数,为json对象,会对json的键逐一赋值,如

    $("input").css({color:"blue",background:"red"})

          操作属性

    属性操作方法名:attrremoveAttr

    方法attr参数有4种情况:

    Ø  只传属性名,返回该jQuery元素的属性值(注意如果查找到多个元素,则返回第一个元素的属性),如$("input").attr("title")返回的是第一个inputtitle

    Ø  传递两个参数,且第二个参数为值时,为dom元素属性赋值,如

    $("input").attr("title", "这是一个文本框")

    Ø  传递两个参数,且第二个参数为function,为dom元素属性赋函数计算值,如

    $("input").attr("title", function () { return "这是一个文本框"})

    Ø  传递一个参数,且为json对象时,会对json的键逐一赋值,如

    $("input").attr({ title: "this the title",value:"this the value" })

          html 文本

    这三类操作一致

    获取内容为$("input").html/text/val()

    设置时为$(" input ").html/text/val("内容")

    $("input").val 等于input.attr("value")

  • 相关阅读:
    Unity中的shadows(一)
    位1的个数
    Lua的协程
    安装SQL Server 2016时报0x84b10001生成XML文档时出错
    pcl registeration
    SO3和SE3的使用
    save_obj
    vulkan
    gcc编译选项
    全局函数与全局变量 多次使用、引用
  • 原文地址:https://www.cnblogs.com/softxu/p/2330800.html
Copyright © 2020-2023  润新知