一、jQuery选择器
- 元素选择器
-
jQuery 元素选择器基于元素名选取元素。
-
在页面中选取所有
<p>
元素: -
$("p")
-
- #id选择器
- jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
- 页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
- 通过 id 选取元素语法如下:
$("#test")
- .class选择器
- jQuery 类选择器可以通过指定的 class 查找元素。
- 语法如下:
$(".test")
-
- 补充:
- $("*") 选取所有元素
- $(this) 选取当前 HTML 元素
- $(“p.intro”) 选取 class 为 intro 的
<p>
元素 - $(“p:first”) 选取第一个
<p>
元素 - $(“ul li:first”) 选取第一个
<ul>
元素的第一个<li>
元素 - $(“ul li:first-child”) 选取每个
<ul>
元素的第一个<li>
元素 - $("[href]") 选取带有 href 属性的元素
- $(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的
<a>
元素 - $(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的
<a>
元素 - $(":button") 选取所有 type=“button” 的
<input>
元素 和<button>
元素 - $(“tr:even”) 选取偶数位置的
<tr>
元素 - $(“tr:odd”) 选取奇数位置的
<tr>
元素
具体的看:jQuery选择器
二、常见的面试题
1.请写出jquery的语法?
<script type="text/javascript">
$(document).ready(function(){
// 程序段
})
</script>
window.function(){
// 程序段
}
前者效率高
$(function(){
// 程序段
})
2.请问什么是DOM对象?
DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。
var txt = document.getElementById(“text”).value;
3.请问什么是jquery对象?
通过jquery自身的方法获取页面元素的对象,就是jquery对象。
var txt = $("#text").val();
$("#text").toggleClass(“txtClick”).html(“点击后切换样式”);
4.jquery选择器有哪些?
jquery选择器有:基本选择器,层次选择器,过滤选择器,表单选择器四大类。
过滤选择器分6种:简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象属性过滤选择器。
基本选择器:
#id 根据给定的id进行匹配一个元素
element 根据给定的元素名进行匹配所有元素
.class 根据给定的类匹配该类的所有元素
- 匹配所有元素
selector1,selector2 匹配给定的元素,合并一起
层次选择器:
ancestor descendant 根据祖先元素匹配所有后代的元素
祖先和后代的关系
parent > child 根据父元素匹配所有的子元素
父子的关系
prev + next 根据prev元素匹配后面的所有相邻元素
于.next()相同,prev元素后的下一个元素
prev ~ siblings 匹配prev元素后的所有兄弟元素
于.nextAll()相同,prev元素后的所有相邻元素,获取元素后面的全部相邻元素
.siblings()方法,获取前后所有相邻的元素
简单过滤选择器器:
:animated 获取执行正在动画效果的元素
:header 获取所有标题类型的元素
:lt(index) 获取小于给定索引值的元素
:gt(index) 获取大于给定索引值的元素
:eq(index) 获取给定的索引值的元素,从0开始
:odd 获取奇数的元素
:even 获取偶数的元素
:not(selector) 获取除给定选择器外的所有元素
first() 或 :first 获取第一个元素
last() 或 :last 获取最后一个元素
内容过滤选择器:
:contains(text) 获取包含给定文本的元素
:empty 获取所有不包含子元素或文本的空元素
如:
:has(selector) 获取含所选择器的所有元素
:parent 获取含有子元素或文本的元素
如:
可见性过滤选择器:
:hidden 获取所有不可见元素
:visible 获取所有的可见元素
属性过滤选择器:
[attribute]
获取给定属性的元素
[attribute = value]
匹配给定的属性是某个特定值的元素
[attribute != value]
匹配所有不含有特定的属性
[attribute ^= value]
匹配给定的属性以某值开始的元素
[attribute $= value]
匹配给定的属性以某值结尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同时满足多个条件使用
子元素过滤选择器:
:nth-child
从1开始的,匹配每个父元素下第n个元素
$(“ul li:nth-child(2)”); 获取2 3 4。。
:first-child
匹配每个父元素下的第一个子元素
:last-child
匹配每个父元素下的最后一个子元素
:only-child
匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配
表单对象属性过滤选择器:
:enabled
匹配所有可用元素
:disabled
匹配所有不可用元素
:checked
匹配所有选中元素
:selected
匹配所有选中option元素
表单选择器:
:input
会获取所有input,textarea,select,button
:text
匹配所有单行文本元框
:password
匹配所有密码框
:radio
匹配所有单选按钮
:checkbox
匹配所有复选框
:submit
匹配所有提交按钮
:image
匹配所有图像
:reset
匹配所有重置按钮
:button
匹配所有按钮
:file
匹配所有文本域
5.请问你能写出dom结构吗?
html下head,body
head下title,style
body下table,div,p,ul
table下tr
div下span
ul下li
6.给定属性操作,描述作用
attr(): 可以获取元素的属性和属性值
attr(key,value):可以设置元素的属性
removeAttr():可以删除指定的属性
html(): 获取Html内容
html(val): 设置Html内容
text(): 获取元素的文本内容
text(val): 设置元素的文本内容
val():
获取元素的值
val(val):
为元素设置值
val().join(","):
获取选中的多个选项值,用于获取select中多个选项值
设置元素样式
css(name,value); name 样式名称,value样式值
添加样式
addClass(class) 和 addClass(class0 class1 …)
切换样式
toggleClass(class) 如果有该类class就删除,如果没有就添加
进行方法间的切换效果
删除类
removeClass(class);
创建节点元素,动态创建页面元素: $(html)
var $p = $(“
dashucoding
”);内部插入
append(content) : 向所选择的元素内部插入内容
(
"
b
o
d
y
"
)
.
a
p
p
e
n
d
(
("body").append(
("body").append(div);
append(function (index,html)) 同上
appendTo: 把选择的元素追加到另一个指定的元素中
appendTo(content)将一个元素插入另一个指定的元素中
前部分的内容插入其后部分的内容
(
"
s
p
a
n
"
)
.
a
p
p
e
n
t
T
o
(
("span").appentTo(
("span").appentTo((“div”));
prepend(coontent): 向每个所选择的的元素内部前置内容
prepend(function(index,html))
prependTo(content)
外部插入
after(content): 向所选择的元素外部后面插入内容
after(function)
before(content): 向所选择的元素外部前面插入内容
before(function)
insertAfter(content) 选择的元素插入另一个元素外部后面
insertBefore(content) 选择元素插入另一个元素外部前面
复制节点
clone()复制元素本身和clone(true)复制元素和所有功能
$(this).clone().appendTo(“span”); 和 $(this).clone(true).apendTo(“span”);
替换节点
replaceWith(content)
将选择的元素替换成指定内容
$(“span”).replaceWith(“
dashu
”);replaceAll(selector)
将选择的元素替换成指定的selector的元素
$(“
dashu
”).replaceAll("#text");包裹节点
wrap(html): 将所有选择的元素用其他字符串代码包裹起来
wrap(elem): 将所有选择的元素用其他Dom元素包裹起来
wrap(fn)
unwrap() 移除所选元素的父元素或包裹的标记
wrapAll(html),wrapAll(elem)
wrapInner(html),wrapInner(elem)
wrapInner(fn)
wrap(html), wrapInner(html);
包裹外部元素
包裹元素内部的文本
da
$(“p”).wrap("");
da
$(“span”).wrapInner("");
da
遍历元素each()方法进行元素的遍历
删除元素
remove()删除该元素和empty()清空全部节点或所有后代元素