初识jQuery获取属性及属性的简单认识(2)

冷不防 2022-04-17 01:57 214阅读 0赞

# jQuery的属性及简单的使用 #

## 一、属性选择器 ##

### 1、title 获取属性 ###

//在使用$( )函数时,如果是获取标签,必须使用" "(双引号)引起来,如果是DOM或者变量都不需要使用" "
    //title是属性标签
    $("[title]");//获取属性是title属性的标签;
    $("a[title]");//标签选择器和属性选择器的组合;获取a标签的title属性;
    $("[title!=img]")};//选中title属性不是img这个值,也包括没有title属性的元素;

### 2、class选择器 ###

$("[class^=div]");//获取class名为div开头的
    $("[class^='div']");//与上面相同的用途;
    
    $("[class$='0']");//class的值是以0结尾的元素;
    $("[class|=lis]");//选中class的值是lis或者值是以lis起头并且后面紧跟-的元素;(如:lis-1;lis-2;lis-8);
    $("[class~=bn]");//选中class的类组中包含bn这个类的,也就是说这个类名可能前后有空格;(如:class="bn bn1";class="bn2 bn bn4")
    
    $("[title][class][class!=lis]");//多项属性选择器;

## 二、筛选器 ##

> ***伪类选择器其实就是筛选器***

$("li:first").text("a");//第一个li的文本是"a";
    $("li:last").text("a");//最后一个li;
    $(".div0:fist");//获取第一个class名是div0的属性;
    **//$(".div0:first-of-type");//first-of-child是不支持class名的;**
    $("div:first");第一个div元素;
    $("div:first-child");//这个必须存在父元素,表示div的第一个子元素;
    $(".div0first-child");//这个支持的;表示class名为div0的第一个子元素;
    
    //按奇偶选择(从序列0开始计算)
    $("li:even");//列表中偶数序列;
    $("li:odd");//列表中奇数序列;
    
    //按索引选择
    $("li:eq(1)");//列表中索引值所对应的元素;
    $("li:gt(2)");//从列表中索引值是2的向下所有的元素;
    $("li:lt(2)");//从列表中索引值是2的向上所有的元素;
    
    $(":header");//h1-h6的元素;
    $(":animated");//动画选择器;
    $(":focus");//汇集焦距选择器;
    
    $("li").eq(0);// == $("li:eq(0)");
    $("li").first()// == $("li:first");
    $("li").last();// == $("li:last");
    $("li").not(["[class~=div0]"]);// == $("li:not([class~=div0])")
    
    //内容过滤器
    $("div:empty");//过滤div是空元素;不含有子元素和内容元素div他的子项中有class是.div0;
    $("div:has(.div0)");//找的是父元素,如果某个元素有div0这个class,就会找到他的所有父级元素与$("div:empty")相反;
    $("div:parent");//过滤div中是不是空元素的,含有子元素和内容的元素;
    $("div").has(".div0");// === $("div:has(.div0)");// 前者效率高;
    
    $("sapn").parent();//仅找到当前选择器的父元素;
    $("span").parents();//找到所有父元素;
    $("span"),parentsUntil("body");//找到父级元素到某个父元素的所有元素;
    
    $("div:contains('2')");
    $("div").contains("2");
    
    //主要是针对display:none来使用
    $("div:hidden");//隐藏的元素;
    $("div:visible");//显示的元素;
    $("li:only-child");//当前项仅为父元素的唯一子项;
    $("li:nth-child(2)");//有父元素的li列表中的第2个元素;
    $("li:nth-child(even)");//从1开始的偶数项;
    $("li:even");//这个是从0开始偶数项;
    $("li:nth-child(odd)");//从1开始的奇数项;
    $("li:nth-child(3n)");//三的倍数;
    $("li:nth-child(2n-1)");//单数
    
    $("li").is(".li0");//判断列表中有没有class是.li0的元素，返回结果是true/false;
    $("li").is("#lis");//判断列表中有没有id是lis的元素;
    $("li").hasClass("li0");//判断当前列表中有没有class是.li0，只能判断class，函数中不使用.来说明class名;
    $("li").slice(2,5);//从jQuery列表中截取对应的元素

## 三、text、html、value ##

### 1、text ###

$("div").text("aaa");//给所有的jQuery对象都写入aaa的字符;
    $("div").text();//获取所有的div中字符;
    
    $("div").each(function (index,elem) { 
              console.log(index,elem,this);
              //这里的this是该DOM对象
          })

### 2、html ###

$("div").html("<a href='#'>内容</a>");
    console.log($("div").html());//这里仅获取第一个html内容;
    
    $.each(arr1,function (index,item) { 
                $("div").eq(index).html("<a href='"+item.href+"'>"+item.name+"</a>")
            })//多个div中添加a标签和数组中的数据;

### 3、value ###

$("input").val("aaa");//输入框中含有默认值"aaa"
    console.log($("input").val());//获取input的value;

## 四、属性的设置 ##

### 设置属性和获取属性 ###

$("div").attr("names","xie");
    console.log($("div").attr("names"));
    
    $("div").attr("names",function(index,value){ 
             return   "div"+index;
    })//给div的names属性加div0,div1,div2……
    //$("选择器").attr({ 
           "属性1":function(index,value){ 
                   return     值;
           },
           "属性2":function(index,value){ 
                   return     值;
            }
    })
    
    $("div").attr({ 
              "names":function(index,value){ 
                          return    "div"+index;
              },
              "toggle-data":function(index,value){ 
                           return     "data"+index;
              }
    })

## 五、css样式 ##

$("div").css("backgroundColor","red");//设置div背景色是红色;
    console.log($("div").css("backgroundColor"));//获取div背景色颜色;
    $("div").css("backgroundColor",function(index,value){ 
          return  index===0 ? "red" : "blue";
    });//div的序列号是0的div是红色,其他事蓝色;
    
    $("div").css({ 
        "width":"100px",
        height:"100px"
    });//设置div宽高为100px;
    $("div").css({ 
        "width":function(index){ 
             return  (index+1)*20+"px"
        },
        height:function(index){ 
             return  (index+1)*20+"px"
        },
        backgroundColor:function(index){ 
             return   "#"+(Math.floor(Math.random()*256*256*256)).toString(16);  
        }
    });//设置idv依次从小到大的正方形,背景颜色随机;如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]

直接添加样式,利用class名在css样式中的样式,这里不需要加.(点);
    $("div").addClass("div0 div2");
    //当添加多个样式时,用空格分开;(如:添加div0的样式和div2的样式);
    $("div").removeClass("div2");
    //可以移除其中任意一个样式;
    $("div").addClass("div0").on("click",function(e){ 
        console.log(this);//这个的this被点击的是DOM对象
        $(this).toggleClass("div1");//切换div1的样式;形成开关的效果;
        $(this).toggleClass("div1",true);//切换一次div1样式;
        $(this).toggleClass("div1",false);//不可切换样式;
    })

## 六、DOM宽高和位置 ##

$("div").width(100);//设置宽度为100px;
    console.log($("div").width());//获取宽度,值为纯数字;
    
    $("div").on("click",function(e){ 
        $(this).width($(this).width()+10);
    });//当点击div时,帝女的宽度加10px;
    
    $("div").height(100);//设置高度,同宽度一样;
    $("div").height(function(index,value){ 
         return value+10; 
    });
    
    //仅获取,但是尽量不要设置它的值;
    console.log($("div").innerWIdth());//width+padding;
    $("div").innerWidth(100);//尽量不要设置;
    console.log($("div").outerWidth());//width+padding+border;
    console.log($("div").outerWidth(trun));//width+padding+border+margin;
    
    //仅获取,不可设置的属性;
    console.log($("div").offset().left);//{left.top}对象;
    //let {left,top}=$("div").offset();
    //console/log(left,top);
       //position相对于父元素定位的位置,offset是相对于页面的位置;
    console.log($(".div1").position());
    console.log("(.div1").offset());

#### 这些都是jQuery的基础知识, 为了方便理解和甄别. ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNjMwMA_size_16_color_FFFFFF_t_70]: /images/20220417/79303176d8ba4a2e8a1f26fac0966e27.png