共计 2342 个字符,预计需要花费 6 分钟才能阅读完成。
抉择元素
将一个抉择表达式,放进构造函数 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(): 设置或返回匹配元素的值。