基本选择器
什么是#id,element,.class,*,selector1, selector2, selectorN?
1).根据给定的id匹配一个元素,用于搜索,通过id的属性给定值。
案例:查找id为da3的元素
$("#da3"); 结果:[
1).根据给定的id匹配一个元素,用于搜索,通过id的属性给定值。
案例:查找id为da3的元素
$("#da3"); 结果:[
2).根据给定的元素名匹配所有元素
案例,查找div元素:
da1da2da3
$("div"); 结果:[
da1,da2]
3).根据给定的类匹配元素
dashuda$(".da"); 结果:[
da
4).匹配所有元素*
12
$("*"); 结果:[
1,2
]
5).将每一个选择器匹配到的元素合并后一起返回:
$(".da, p, span"); 结果:[
6).层级选择器
1).给祖先元素下匹配所有的后代元素
$("table input"); 结果:[
, ]
2).给父元素下匹配所有子元素:
$("table > input"); 结果:[
]
3).匹配所有prev元素后的next元素:
$("p + input"); 结果:[,]
4).匹配prev元素后的所有siblings元素:
找出同辈的元素
$("table ~ input"); 结果:[
]
:first :last :not :even :odd :eq :gt :lt :header :animated
1).获取第一个元素
- 1
- 2
$("li").first();或$("li :first");
[
1 ]
2).获取最后一个元素
$('li').last();
- 1
- 2
$("li :last");
[
2 ]
a).查找所有未选中的input元素
$("input:not(:checked)")
[]
b).匹配所有索引值为偶数的元素
0 1 2 $("tr:even")
[
, 0 ] 2
c).匹配所有索引值为奇数的元素
0 1 2 $("tr:odd")
[
] 1
d).匹配一个给定索引值的元素
0 1 2 $("tr:eq(1)")
[
] 1
e).匹配所有大于给定索引值的元素
0 1 2 $("tr:gt(0)")
[
, 1 ] 2
f).匹配所有小于给定索引值的元素
0 1 2 $("tr:lt(2)")
[
, 0 ] 1
g).匹配标题元素
1
1
2
2
$(":header");
[
1
,2
]
h).匹配所有正在执行动画效果的元素
:contains :empty :has :parent
1).匹配包含给定文本的元素
2).匹配所有不包含子元素或者文本的空元素
3).匹配含有选择器所匹配的元素的元素
4).匹配含有子元素或者文本的元素
:hidden :visible
1)匹配所有不可见元素
display:none type="hidden"
2).匹配所有的可见元素
type="visible"
[attribute]
[attribute = value] 匹配给定的属性是某个特定值的元素
[attribute != value] 匹配所有不含有特定的属性
[attribute ^= value] 匹配给定的属性以某值开始的元素
[attribute $= value] 匹配给定的属性以某值结尾的元素
[attribute *= value] 匹配有包含某些值的特定元素
[selector1][selector2] 同时满足多个条件使用
$("div[id]");
[
]
:nth-child
从1开始的,匹配父元素下第n个元素
$("ul li:nth-child(2)");获取234。。
:first-child
匹配每个父元素下的第一个子元素
:last-child
匹配每个父元素下的最后一个子元素
:only-child
匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配
:input 会获取所有input,textarea,select,button
:text 匹配所有单行文本元框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文本域
:hidden 匹配所有不可见元素
选择器表单对象属性有哪些?
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中元素
:selected 匹配所有选中option元素
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中元素
:selected 匹配所有选中option元素
attr(name); 获取属性值
attr(properties); 以“名/值对”对象添加属性
attr(key,value); 为所匹配的元素设置属性值
attr(key,function(index,attr)); 为所匹配的元素设置属性值
removeAttr(name); 删除属性
addClass(class);
添加一个类名$("p").addClass("selected");
addClass(function(index,class));
添加类名$('ul li:last').addClass(function(){})
removeClass([class]);
删除指定类removeClass(function(index,class))
删除指定类toggleClass(class);
有切换效果,如果有这个属性值就删除如果没有就添加
toggleClass(class,switch);
switch为ture添加class,反之删除
toggleClass(function(index,class),[switch]);
switch为ture添加class,反之删除
html() 获取html内容
html(val) 设置html内容的值
html(function(index,html)); 设置html内容的值
text() 获取元素内容
text(val) 设置内容文本
text(function(index,text)) 设置内容文本
val() 获取元素的当前值
val(val) 设置匹配元素的值
val(array) 赋值作用
val(function(index,value)) 设置元素值
eq(index): 获取第n个元素 $("p").eq(1)
first(): 获取第一个元素 $('li').first()
last(): 获取最后一个元素 $('li').last()
hasClass(class): 判断是否有给类
filter(expr): 选出表达式匹配的元素
is(expr):进行判断
map(callback):$.map()
has(expr):保留 .has()
not(expr): .not()
children(); 获取子元素
find(); 用于查找表达式
next(); 获取下一个元素
nextAll(); 获取下一个所有元素
parent(); 获取父元素
parents(); 获取所有匹配元素的祖先元素的集合
prev(); 获取前一个元素
prevAll(); 获取之前所有同辈元素
siblings(); $("div").siblings()
add();
$("p").add("span")
$("p").add("da");
da
append() 中间插入
$("p").append("
");
appendTo();
$("p").appendTo("div");
prepend() 元素内部前置内容
hello
$("p").prepend("");
hello
$("p").prependTo("");
after(); 在后面追加
before(); 在前面追加
$("p").insertAfter("#foo");
da da
$("p").insertBefore("#foo");
$(function(){// 程序段})
DOM对象,DOM为文本对象模型,DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象,就是DOM对象。
var txt = document.getElementById("text").value;
var txt=$("#text").val();
$("#text").toggleClass("txtClick").html("点击后切换样式");
jquery选择器有:
基本选择器,层次选择器,过滤选择器,表单选择器四大类。
过滤选择器分6种:
简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象属性过滤选择器。
基本选择器:
#id 根据给定的id进行匹配一个元素
element 根据给定的元素名进行匹配所有元素
.class 根据给定的类匹配该类的所有元素
* 匹配所有元素
selector1,selector2 匹配给定的元素,合并一起
html下head,body
head下title,style
body下table,div,p,ul
table下tr
div下span
ul下li
复制节点
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() 清空全部节点或所有后代元素
stop Propagation(); 阻止冒泡过程
onload()方法要等页面中全部元素加载到浏览器中才执行,如果页面中存在大量图片,要等这些内容加载完毕。
ready()方法只要页面的dom模型加载完毕即可,就会触发ready()。
$(document).ready(function(){});
$(function(){});
jQuery(document).ready(function(){});
jQuery(function(){});
bind(type,[data],fn);
绑定类型:
blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,select,submit,keydown,keypress,keyup,error,mousemove,mouseover,mouseout,mouseenter,mouseleave,change
$("#btn").bind("click",function(){});
$(".txt").bind("focus",{msg:message},
function(event){// 获取数据 event.data.msg });
$(function(){$(".txt").bind({focus:function(){};},{change:function(){}})})
$("a").hover(function(){// 执行一 }, function() { // 执行二 });
hover(over,out)
$("a").mouseenter(function(){});
$("a").mouseleave(function(){});
toggle()方法可以依次执行函数
toggle(fn,fn2,fn3...);
unbind() 可以移除元素的绑定事件
unbind([type], [fn])
移除全部事件unbind();
one()方法可以将所选选的元素绑定一个触发一次的处理函数
one(type, [data], fn);
trigger()自动执行, triggerHandler()方法进行取消
trigger()方法 trigger(type, [data]) 所选择的元素上触发指定事件
document.getElementById("p").style.display="block";
document.getElementById("p").style.display="none";
$("p").css("display":"block");
$("p").css("display":"none");
show()和hide()方法进行显示和隐藏
show(speed,[callback]);
hide(speed,[callback]);
toggle() 方法如果显示状态,就变成隐藏状态,如果是隐藏状态,就变成显示状态。
toggle()
toggle(switch)switch为布尔值,true显示元素,反之隐藏
toggle(speed,[callback])
slideDown()方法和slideUp()方法
slideDown(speed,[callback])
slideUp(speed,[callback])
slideToggle(speed,[callback]) 以动画效果切换所选择的元素
fadeIn()与fadeOut()方法进行淡入淡出效果。
fadeIn(speed,[callback]) 实现淡入动画效果
fadeOut(speed,[callback]) 现实淡出的动画效果
fadeTo()方法给定透明度值
fadeTo(speed,opacity,[callback]);
animate(params,[duration],[easing],[callback])
$(function(){ $("p").click(function(){
$(this).animate({height: 100}, "slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:50},"slow");
}) })
stop([clearQueue],[gotoEnd]) 停止正在执行的动画,
clearQueue是布尔值,是否停止正在执行的动画,
gotoEnd是布尔值,是否完成正在执行的动画。
delay(duration,[queueName]) 延时动画效果
show()和hide()方法 实现动画效果的显示和隐藏
slideUp()和slideDown() 实现“上下”的动画效果的显示和隐藏
fadeTo() 实现指定的透明度的效果
toggle() 方法进行切换效果,显示和隐藏
slideToggle() 方法可以上下显示和隐藏的效果
animate() 方法进行自定义元素的动画
$("p").animate({height:"hide",width:"hide",opacity:"hide"},300);
$("p").hide(300);
$("p").animate({opacity:"hide"},300);
$("p").fadeOut(300);
$("p").animate({height:"hide"},300);
$("p").slideUp(300);
$("p").animate({opacity:"0.8"},300);
$("p").fadeTo(300,"0.8");