抉择元素
将一个抉择表达式,放进构造函数jQuery()(简写为$),而后失去被选中的元素。
抉择表达式能够是CSS选择器:
$(document) //抉择整个文档对象 $('#myId') //抉择ID为myId的网页元素 $('div.myClass') // 抉择class为myClass的div元素 $('input[name=first]') // 抉择name属性等于first的input元素
也能够是jQuery特有的表达式:
$('a:first') //抉择网页中第一个a元素 $('tr:odd') //抉择表格的奇数行 $('#myForm :input') // 抉择表单中的input元素 $('div:visible') //抉择可见的div元素 $('div:gt(2)') // 抉择所有的div元素,除了前三个 $('div:animated') // 抉择以后处于动画状态的div元素
扭转后果集范畴
$('div').has('p'); // 抉择蕴含p元素的div元素 $('div').not('.myClass'); //抉择class不等于myClass的div元素 $('div').filter('.myClass'); //抉择class等于myClass的div元素 $('div').first(); //抉择第1个div元素 $('div').eq(5); //抉择第6个div元素
从后果集登程,挪动到左近的相干元素,jQuery也提供了在DOM树上的挪动办法:
$('div').next('p'); //抉择div元素前面的第一个p元素 $('div').parent(); //抉择div元素的父元素 $('div').closest('form'); //抉择离div最近的那个form父元素 $('div').children(); //抉择div的所有子元素 $('div').siblings(); //抉择div的同级元素
获取元素
通过attr()办法来批改元素的属性,attr() 办法设置或返回被选元素的属性值。
依据该办法不同的参数,其工作形式也有所差别。语法为:$(selector).attr(attribute,value)
获取节点属性名的值,相当于getAttribute(key)办法$(this).attr(key);
设置节点属性的值,相当于setAttribute(key,value)办法$(this).attr(key, value);
获取节点属性的值var diywidgetid = $('#w_1').attr('diywidgetid');
获取某个元素节点的value值,相当于$(this).attr(“value”);$(this).val();
设置某个元素节点的value值,相当于$(this).attr(“value”,value);$(this).val(value);
链式操作
选中网页元素当前,能够对它进行一系列操作,并且所有操作能够连贯在一起,以链条的模式写进去
$('div') //找到div元素 .find('h3') //抉择其中的h3元素 .eq(2) //抉择第3个h3元素 .html('Hello'); //将它的内容改为Hello
原理就是每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作能够连在一起。
.end()办法,使得后果集能够后退一步:
$('div') .find('h3') .eq(2) .html('Hello') .end() //退回到选中所有的h3元素的那一步 .eq(0) //选中第一个h3元素 .html('World'); //将它的内容改为World
创立元素
把新元素传入jQuery的构造函数
$('<p>Hello</p>'); $('<li class="new">new list item</li>'); $('ul').append('<li>list item</li>');
挪动元素
两组办法,来操作元素在网页中的地位挪动。一组办法是间接挪动该元素,另一组办法是挪动其余元素,使得指标元素达到咱们想要的地位。
情景:假设咱们选中了一个div元素,须要把它挪动到p元素前面。
办法1.应用.insertAfter(),把div元素挪动p元素前面:
$('div').insertAfter($('p'));
办法2.应用.after(),把p元素加到div元素后面:
$('p').after($('div'));
区别:返回的元素不一样。第一种办法返回div元素,第二种办法返回p元素。依据须要,抉择应用哪一种办法。
四对操作方法:
.insertAfter()和.after():在现存元素的内部,从前面插入元素 .insertBefore()和.before():在现存元素的内部,从后面插入元素 .appendTo()和.append():在现存元素的外部,从前面插入元素 .prependTo()和.prepend():在现存元素的外部,从后面插入元素
批改元素的属性
addClass():向匹配的元素增加指定的类名。
attr():设置或返回匹配元素的属性和值。
hasClass():查看匹配的元素是否领有指定的类。
html():设置或返回匹配的元素汇合中的 HTML 内容。
removeAttr():从所有匹配的元素中移除指定的属性。
removeClass():从所有匹配的元素中删除全副或者指定的类。
toggleClass():从匹配的元素中增加或删除一个类。
val():设置或返回匹配元素的值。