初次接触Jquery

1、JQuery中的选择器

（1）基本选择器

 //引入jquery

（2）层次选择器 ：通过元素间的层次关系来获取元素

    
1
    
2
        

            
11
            
22
            
33
        
    
    
3
    
5
    
4


    
p标签
    span标签

 （3）简单过滤器：过滤选择器是根据某类过滤规则进行元素的匹配

继续使用之前的ul和li标签举例子

    console.log($("ul>li:first"));//获取ul下的第一个li
    console.log($("ul>li:last"));//获取ul下的最后一个li
    console.log($("ul>li:even"));//获取所有索引为偶数的li集合
    console.log($("ul>li:odd"));//获取所有索引为奇数的li集合
    console.log($("ul>li:gt(1)"));//获取索引大于给定索引（1）的li集合
    console.log($("ul>li:lt(1)"));//获取索引小于给定索引（1）的li集合
    console.log($("ul>li:eq(2)"));//获取索引等于给定索引（2）的li集合
    console.log($("ul>li:not(.li3)"));//获取除了.li3之外的所有li集合

（4）内容过滤器

    console.log($("li:contains('2')"));//获取包含给定文本（2）的元素
    console.log($("div:empty"));//获取空元素，或者子元素为空
    console.log($("div:parent"));//获取子元素不为空的元素自己    
    console.log($("div:has('span')"));//获取含有匹配选择器的元素的元素

 （5）可见性选择

（6）属性选择器

 console.log($("button[id='btn'][class='btn1']"));

（7）子元素过滤选择

    console.log($("ul>li:nth-child(2)"));//获取每个父元素下的特定位置的元素
    console.log($("ul>li:first-child"));//获取每个父元素下的第一个子元素
    console.log($("ul>li:last-child"));//获取每个父元素下的最后一个子元素
    console.log($("div>p:only-child"));//获取父元素下仅有的一个子元素

（8） 表单元素属性过滤

    
    宝鸡
    西安
    
    

2、JQuery中的Dom操作

（1）获取或设置元素的属性值

    $("input[type='button']").attr("value","按钮1");//将选中元素的value属性的值设置为 按钮1
    console.log( $("input[type='button']").attr("value"));//获取选中元素的value的值
    $("input[type='button']").prop("value","按钮1");//将选中元素的value属性的值设置为 按钮1
    console.log( $("input[type='button']").prop("value"));//获取选中元素的value的值

除了单个设置还能依次设置多个属性值

$("input[type='button']").prop({
     height: "90px",
     value: "单击"
     })

（2）删除元素的属性

$("input[type='button']").removeAttr("data-src");
console.log(btn.attr("data-src"));

（3）元素内容的操作

    通过JQ修改元素内容

（4）设置css样式

当需要设置多个css样式时可以这样设置

$("#username").css({
        width: "200px",
        height: "50px"
    });