zoukankan      html  css  js  c++  java
  • Jquery权威指南

    1.Radio

    <input id="Radio1" name="rdoSex" type="radio" value="男" />
    $("#Radio1:checked").val()--根据Id获取值
    $("input[name=rdoSex]:checked").val()--根据name获取值
    $("#Radio1").is(":checked")--根据id判断是否选中
    

    2.table表格样式设置

    $("#tableId tr:nth-child(even)").addClass("样式")--控制偶数行样式
    $("#tableId tr:nth-child(odd)").addClass("样式")--控制奇数行样式

    :nth-child(even) 的意思就是从第1开始的偶数元素,:even的意思是指从第0开始的偶数元素
    $('table tr:nth-child(even)').css('background-color','red');


    $('table tr:even').css('background-color','red');

    3.Jquery选择器

    1)基本选择器

    选择器描 述返 回示 例
    #id 匹配给定的id 单个元素 $(“header”)
    .class 匹配给定的类名 集合元素 $(“.test”)
    E 匹配给定的标签名 集合元素 $(“div”)
    * 匹配所有元素 集合元素 $(“*’)
    E, .class, E… 匹配给定的集合 集合元素 $(“span, .tiPS”)

    2)层次选择器

    选择器描 述返 回示 例
    $(“ancestor descendant”) 匹配ancestor里的所有
    descendant(后代)元素
    集合元素 $(“body div”)
    $(“parent>child”) 匹配parent下的所有
    child(子)元素
    集合元素 $(“div>span”)
    $(“prev+next”) 匹配紧接在prev后的
    next元素
    集合元素 $(“.error+span”)
    $(“prev~siblings”) 匹配prev后的所有
    siblings元素
    集合元素 $(“span~a”)

    3)过滤选择器

    a)基本过滤选择器

    选择器描 述返 回示 例
    :first 匹配第一个元素 单个元素 $(“div:first”)
    :last 匹配最后一个元素 单个元素 $(“span:last”)
    :even 匹配索引是偶数的元素
    索引从0开始
    集合元素 $(“li:even”)
    : odd 匹配索引是奇数的元素
    索引从0开始
    集合元素 $(“li:odd”)
    :eq(index) 匹配索引等于index的元
    素(索引从0开始)
    单个元素 $(“input:eq(2)”)
    :gt(index) 匹配索引大于index的元
    素(索引从0开始)
    集合元素 $(“input:gt(1)”)
    :lt(index) 匹配索引小于index的元
    素(索引从0开始)
    集合元素 $(“input:lt(5)”)
    :header 匹配所有h1,h2…等
    标题元素
    集合元素 $(“:header”)
    :animated 匹配所有正在执行
    动画的元素
    集合元素 $(“div:animated”)

    b)内容过滤选择器

    选择器描 述返 回示 例
    :contains(text) 匹配含有文本内容text
    的元素
    集合元素 $(“p:contains(今天)”)
    :empty 匹配不含子元素或
    文本元素的空元素
    集合元素 $(“p:empty”)
    :has(selector) 匹配包含selector元素
    的元素
    集合元素 $(“div:has(span)”)
    :parent 匹配含有子元素或文本
    的元素
    集合元素 $(“div:parent”)

    c)可见性过滤选择器

    选择器描 述返 回示 例
    :hidden 匹配所有不可见
    的元素
    集合元素 $(“:hidden”)
    :visible 匹配所有可见元素 集合元素 $(“:visible”)

    d)属性过滤选择器

    选择器描 述返 回示 例
    [attr] 匹配拥有此属性
    的元素
    集合元素 $(“img[alt]“)
    [attr=value] 匹配属性值为value
    的元素
    集合元素 $(“a[title=test]“)
    [attr!=value] 匹配属性值不等于
    value的元素
    集合元素 $(“a[title!=test]“)
    [attr^=value] 匹配属性值以value
    开头的元素
    集合元素 $(“img[alt^=welcome]“)
    [attr$=value] 匹配属性值以value
    结尾的元素
    集合元素 $(“img[alt$=last]“)
    [attr*=vlaue] 匹配属性值中含有
    value的元素
    集合元素 $(“div[title*=test]“)
    [attr1][attr2]… 通过多个属性
    进行匹配
    集合元素 $(“div[id][title*=test]“)

    d)子元素过滤选择器

    选择器描 述返 回示 例
    :nth-child 匹配每个父元素下的
    第index个子元素
    索引从1开始
    集合元素 $(“div:nth-child(2)”)
    :first-child 匹配每个父元素的
    第一个子元素
    集合元素 $(“div:first-child”)
    :last-child 匹配每个父元素的
    最后一个子元素
    集合元素 $(“div:last-child”)
    : only-child 某元素是它父元素中
    的唯一的子元素
    则匹配它
    集合元素 $(“div:only-child”)

    d)表单对象属性过滤选择器

    选择器描 述返 回示 例
    :enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
    :disabled 匹配所有不可用
    的元素
    集合元素 $(“form :disabled”)
    :checked 匹配所有被选中的元素
    (含单选框,复选框)
    集合元素 $(“input:checked”)
    :selected 匹配所有被选中的
    选项元素
    集合元素 $(“select :selected”)

    4.表单选择器

    选择器描 述返 回示 例
    :enabled 匹配所有可用元素 集合元素 $(“form :enabled”)
    :disabled 匹配所有不可用
    的元素
    集合元素 $(“form :disabled”)
    :checked 匹配所有被选中的元素
    (含单选框,复选框)
    集合元素 $(“input:checked”)
    :selected 匹配所有被选中的
    选项元素
    集合元素 $(“select :selected”)

    5.$.each用法

    1)处理一维数组

     var arr1 = ["a", "b", "c"];
                $.each(arr1, function (i, val) {
                    alert(i);//0 1 2
                    alert(val);//a b c
                });
    

    2)处理二维数组

    var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
                $.each(arr, function (i, item) {
                    alert(i);//0 1 2
                    alert(item);//输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
    });
    对此二位数组的处理稍作变更之后
     var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]      
       $.each(arr, function(i, item){      
            $.each(item,function(j,val){
                alert(j);
                alert(val);
         }); 
    });    
    alert(j)将输出为0,1,2,0,1,2,0,1,2
    alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc

    3)each处理json数据,这个each就有更厉害了,能循环每一个属性

    var obj = { one:1, two:2, three:3};      
       each(obj, function(key, val) {      
            alert(key);   
            alert(val);      
       });   
    

    这里alert(key)将输出one two three
    alert(val)将输出one,1,two,2,three,3
    这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
    而这个val等同于obj[key]

    4)ecah处理dom元素

    $.each("元素集合", function (index, ele) {
    index:从0开始的索引
    ele:$(ele)表示当前对象
    })
  • 相关阅读:
    C#不引用IWshRuntimeLibrary获取快捷方式目标位置
    chrome插件
    禁用右键菜单
    自定义创建右键菜单项目
    Win10怀旧--win7体验
    Win10隐藏托盘图标-注册表
    一些软件下载地址
    Win10锁屏与关机相关设置-注册表
    Winform开发中的窗体重复及灵活切换问题
    Winform开发中如何将数据库字段绑定到ComboBox控件
  • 原文地址:https://www.cnblogs.com/cnki/p/5315211.html
Copyright © 2011-2022 走看看