属性和特性
操作元素属性
jQuery没有用于获取或者修改元素属性的命令。需要利用javascript,首先需要做的就是获得元素的引用。
each(function)
对包装集中的各个元素,进行function操作,function有默认的参数为当前元素的位置,function具有当前对象this的引用。
$("img").each(function(n){ this.alt = "this is " + n+1 + "th img, id is " + this.id; });
获取元素特性
attr(name)
返回当前包装集中第一个元素的name属性的值,如果没有设定该属性返回值为undefined。其中name不区分大小写
$('div').attr("name")
this.id vs. $('#id').attr('id')
this.id 返回值为DOM中的值,如果没有设定id,那么id为空"";
$('#id').attr('id'),它的返回值为html中指定的id的值,如果没有指定的话,返回值为undefined。
属性和特性的区别
属性是与生俱来的,即使用户没有设定值他也是有默认值的,能够通过javascript直接改变或者获取;
特性是用户设定的,标准的特性能够通过javascript获取,非标准的只能通过attr(name)来获取。
设置元素特性
attr(name, value)
这个方法的作用是把value的值设定
name跟上面一样;
value可以是一个字符串,这很简单
value可以是一个函数,这能够理解,就是把返回值作为值
attr(attributes)
attributes是一个对象,而这个对象是一个属性<->值所组成的对象,如{id:"some", value:"0"}。
以上两个方法会把包装集中所有的元素的属性都进行修改。
IE中input元素的name属性是不能够进行修改的,如果想要达到相同的效果的话,需要移除原来的input,再追加一个新的input。
删除特性
removeAttr(name)
移除包装集元素中的name特性。特性是能够被删除的,但是属性还是存在的,只不过值发生变化了。
元素样式修改
元素样式,属性为className,特性为class。
对它的修改或者操作不使用className属性或者attr(name)命令,jQuery提供了更加优雅的方式。
追加样式
addClass(names)
给所有的包装集元素追加names样式类。
names可以是一个classs样式,也可以是以空格分隔的多个class样式。
删除样式
removeClass(names)
把指定的样式从包装集元素的样式中移除。
names可以是一个classs样式,也可以是以空格分隔的多个class样式。
样式更迭
toggleClass(name)
对于包装集元素,如果有name指定的样式类,那么删除这个样式类,如果没有这个样式类的话,追加这个样式类。
function swap() { $('tr').toggleClass("bg-blue"); }
直接操作css
css(name, value)
css(properties)
这两个跟attr很像,相当直接了。
css(name)
返回包装集中第一个元素的css中name属性的值。
width(value) / width
height(value) / height
用来设定和获取元素的高度或高度,单位为px
hasClass(name)
name是一个样式类的名称,不带"."。
is(selector) vs. hasClass(name)
他俩在样式判断这方面可以替换,只不过is的参数是一个jQuery选择器,而hasClass的参数是一个样式类;
selector的基本样式为:.className
name的基本样式为className
操作HTML
html() // 获取包装集第一个元素的html
html(text) // 设定包装集元素的html
text() // 获取包装集里元素的所有文本(连不连接起来,不知道。。。)
text(content) // 设定包装集元素的内容,会把<翻译成<。。。
append(content)
content可以是html片段或者是元素(需要用$("")选择出来,,,)
会把content追加到包装集元素内,所有的既有元素之后。
$('table').append("<h1>some</h1>"); // 生成的h1会存在于table里面,这里需要注意
appendTo(target)
target是一个jQuery选择器,或DOM元素
该方法会把包装集里的所有元素追加到target获得的所有的元素内,既有元素之后。
$("source selector").appendTo("target selector")
如果target有一个的话,那么source会被移动;
如果target有多个的话,那么source会被复制。
与append和appendTo相似的有
prepend和prependTo
在目标元素内,所有元素之前插入;
before和insertBefore
在目标元素之外,前面插入;
after和insertAfter
在目标元素值外,后面插入。
A.append(B), A.prepend(B), A.before(B), A.after(B) : 在A中处理B,A是目标,B是处理对象;
A.appendTo(B), A.prependTo(B), A.innertBefore(B), A.innertAfter(B): 把A处理到B中,A是处理对象,B是目标。
包裹元素
实在不知道这个东西的用途。。。
...可以实现全文搜索,将搜索结果用某种特殊的样式表现出来。。。
wrap(wrapper)
wrapper是包装器,用来包装包装集元素的
包装集中的每一个元素都会被包装器包装
wrapAll(wrapper)
包装集中的每一个元素都会被包装在一个包装器中
wrapInner(wrapper)
把包装集中的每一个元素的内容用包装器包装起来
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> $('li')wrap("<div></div>") ----------------------------------------- <ul> <div><li title="苹果">苹果</li></div> <div><li title="橘子">橘子</li></div> <div><li title="菠萝">菠萝</li></div> </ul> $('li')wrapAll("<div></div>") ----------------------------------------- <ul> <div> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </div> </ul> $('li')wrapInner("<div></div>") ----------------------------------------- <ul> <li title="苹果"><div>苹果</div></li> <li title="橘子"><div>橘子</div></li> <li title="菠萝"><div>菠萝</div></li> </ul>
删除元素
remove()
将DOM中的包装集元素删除
这个方法仍然对包装集元素具有引用,这些元素可以进行其它操作,如insertAfter等。
$("div.elementToReplace").after("<p>New Element!</p>").remove();// 新建的p,放到div.elementToReplace后,然后把div.elementToReplace删除;
$("div.elementToReplace").remove().after("<p>New Element!</p>");// 先把div.elementToReplace删除了,又把它放到了新建的p之后。。。
empty()
将包装集元素的内部节点都删除
克隆元素
clone(copyHandlers)
将包装集中的元素进行克隆,进而进行其它的操作。
copyHandlers是一个boolean型的值,是否将节点上的事件一起克隆,一起克隆的话,true,反之,false。
表单元素
val()
获取包装集中第一个元素的value的值,注意,如果第一个元素不存在value属性的话,会抛出javascript错误。
对radio不友好,因为它总会获得第一个radio的value值,但是可以这么获取:$('input[type=radio, name=some]:checked').val();
如果radis一个也没有选择的话,上述代码返回值为undefined。
val(value)
把value的值设定给包装集中的每一个元素,需要注意!!!
设置的貌似只限于输入型的
val(values)
values是一个数组,数组中提供多个值[a, b, c]
这个方法会作用于各种类型的input,select等。但是结果挺乱的
输入型的input:会把值a, b, c输入到文本框内
select的话,会把value相匹配的选项选中
radio的话,没有找到什么规律,不敢乱讲
checkbox的话,会把value相匹配的选项选中