浅谈jQuery获取属性及属性的简单设置

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;