jQuery笔记--样式篇

JQ笔记，供今后学习使用。

属性

/*属性*/
//设置属性
$('#test').attr('属性名', '属性值')

//移除属性
$('#test').removeAttr('属性名', '属性值')

//  

文本内容

.html(),.text(),.val()

.html()是用来读取元素的HTML内容（包括其Html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()是用来读取表单元素的”value”值。

    <q class='test' value='4'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </q>

$('#test').html()
//<span>1</span><span>2</span><span>3</span>
$('#test').text()
//123
$('#test').val()
//4

class

//添加样式名
$('#test').addClass("newClass")
//素移除的一个或多个用空格隔开的样式名
$('#test').removeClass("newClass")
//切换样式名
$('#test').toggleClass( className[, switch ])

css

//设置css样式
$('#test').css(propertyName, value )
//获取css样式
$('#test').css( propertyName ) 

去空格

jQuery.trim()

$.trim($("#results2").val())

遍历

children()

$("div").children()
$("div").children(".abc")

返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

find()

children是父子关系查找，find是后代关系（包含父子关系）

//全查找
$("p").find('*')
//按信息查找
$("p").find('必要参数')

1.ind是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
2.与其他的树遍历方法不同，选择器表达式对于.find()是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。
3.find只在后代中遍历，不包括自己。
4.选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于$(‘li’, ‘.item-ii’)(找到类名为item-ii的标签下的li标签)。

parent()

寻找指定元素的父元素

$(ul).parent()

parents()

寻找指定元素的祖先元素,parents()无参数

$( "div" ).parents()

closest()

//在div元素中，往上查找所有的li元素
$("div").closet("li')

parents()与closet()的区别
起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

next()

查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

$('.item').next(':first')

prev()

查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

$('.item-2').prev()

siblings()

查找指定元素集合中每一个元素的同辈元素

add()

找到指定元素集合之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素

$('li').add('p')

each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。

<ul>
    <li>AAA</li>
    <li>BBB</li>
</ul>

//开始迭代li，循环2次
$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})

查找数组中的索引

$.inArray( value, array ,[ fromIndex ] )

在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1.