基本选择器
什么是#id，element，.class，*，selector1, selector2, selectorN？
1).根据给定的id匹配一个元素，用于搜索，通过id的属性给定值。
案例：查找id为da3的元素
<div id="da1"></div><div id="da2"></div><div id="da3"></div>
$("#da3"); 结果：[<divid="da3"></div>]
2).根据给定的元素名匹配所有元素
案例，查找div元素：
<div>da1</div><div>da2</div><p>da3</p>
$("div"); 结果：[<div>da1</div>,<div>da2</div>]
3).根据给定的类匹配元素
<div class="dashu">dashu</div><div class="da">da</div>
$(".da"); 结果:[<divclass="da">da</div>]
4).匹配所有元素*
<div>1</div><p>2</p>
$("*"); 结果：[<div>1</div>,<p>2</p>]
5).将每一个选择器匹配到的元素合并后一起返回：
<div class="da"></div><p></p><span></span>
$(".da, p, span"); 结果：[<divclass="da"></div>,<p></p>,<span></span>]
6).层级选择器
2.后代选择器，子代选择器，next，siblings描述？
1).给祖先元素下匹配所有的后代元素
<table><input id="da"></input> <input id="da2"></input><p></p></table>
$("table input"); 结果：[<inputid="da"></input>,<inputid="da2"></input>]
2).给父元素下匹配所有子元素：
<table><input id="da"></input> <p> <input id="da2"></input> </p> <p></p></table>
$("table > input"); 结果：[<inputid="da"></input>]
3).匹配所有prev元素后的next元素：
<table><p><input id="da"></input> </p> <p> <input id="da2"></input> </p> <p></p></table>
$("p + input"); 结果：[<input id="da"></input>,<input id="da2"></input>]
4).匹配prev元素后的所有siblings元素：
找出同辈的元素
<table><p> <input id="da"></input> </p> <p> <input id="da2"></input></p> <p></p></table><input id="da3"></input>
$("table ~ input"); 结果：[<inputid="da3"></input>]
基本选择器:?
:first :last :not :even :odd :eq :gt :lt :header :animated
1).获取第一个元素
<ul><li>1</li> <li>2</li></ul>
$("li").first();或$("li :first");
[<li>1</li>]
2).获取最后一个元素
<ul> <li>1</li> <li>2</li></ul>$('li').last();
$("li :last");
[<li>2</li>]
3).去除所有与给定选择器匹配的元素
a).查找所有未选中的input元素
<input name="da1"/><input name="da2"checked="checked"/>
$("input:not(:checked)")
[<input name="da1"/>]
b).匹配所有索引值为偶数的元素
<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></table>
$("tr:even")
[<tr><td>0</td></tr>,<tr><td>2</td></tr>]
c).匹配所有索引值为奇数的元素
<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></table>
$("tr:odd")
[<tr><td>1</td></tr>]
d).匹配一个给定索引值的元素
<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></table>
$("tr:eq(1)")
[<tr><td>1</td></tr>]
e).匹配所有大于给定索引值的元素
<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></table>
$("tr:gt(0)")
[<tr><td>1</td></tr>,<tr><td>2</td></tr>]
f).匹配所有小于给定索引值的元素
<table><tr><td>0</td></tr><tr><td>1</td></tr><tr><td>2</td></tr></table>
$("tr:lt(2)")
[<tr><td>0</td></tr>,<tr><td>1</td></tr>]
g).匹配标题元素
<h1>1</h1><p>1</p><h2>2</h2><p>2</p>
$(":header");
[<h1>1</h1>,<h2>2</h2>]
h).匹配所有正在执行动画效果的元素
4.内容选择器的描述？
:contains :empty :has :parent
1).匹配包含给定文本的元素
2).匹配所有不包含子元素或者文本的空元素
3).匹配含有选择器所匹配的元素的元素
4).匹配含有子元素或者文本的元素
5.可见性选择器
:hidden :visible
1)匹配所有不可见元素
display:none type="hidden"
2).匹配所有的可见元素
type="visible"
6.属性选择器的描述？
[attribute]
[attribute = value] 匹配给定的属性是某个特定值的元素
[attribute != value] 匹配所有不含有特定的属性
[attribute ^= value] 匹配给定的属性以某值开始的元素
[attribute $= value] 匹配给定的属性以某值结尾的元素
[attribute *= value] 匹配有包含某些值的特定元素
[selector1][selector2] 同时满足多个条件使用
<div><p></p></div><divid="da">
$("div[id]");
[<div id="da"></div>]
7.选择器-子元素有哪些？
:nth-child
从1开始的，匹配父元素下第n个元素
$("ul li:nth-child(2)");获取234。。
:first-child
匹配每个父元素下的第一个子元素
:last-child
匹配每个父元素下的最后一个子元素
:only-child
匹配父元素中只有唯一的子元素，如果父元素中有多个子元素，就不会被匹配
8.表单元素有哪些？
:input 会获取所有input,textarea,select,button
:text 匹配所有单行文本元框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文本域
:hidden 匹配所有不可见元素
选择器表单对象属性有哪些？
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中元素
:selected 匹配所有选中option元素
9.选择器表单对象属性有哪些？
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中元素
:selected 匹配所有选中option元素
10.在jquery中有哪些属性？
attr(name); 获取属性值
attr(properties); 以“名/值对”对象添加属性
attr(key,value); 为所匹配的元素设置属性值
attr(key,function(index,attr)); 为所匹配的元素设置属性值
removeAttr(name); 删除属性
11.css 类属性有哪些?
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，反之删除
12.html代码？
html() 获取html内容
html(val) 设置html内容的值
html(function(index,html)); 设置html内容的值
13.文本有哪些？
text() 获取元素内容
text(val) 设置内容文本
text(function(index,text)) 设置内容文本
14.关于val有哪些？
val() 获取元素的当前值
val(val) 设置匹配元素的值
val(array) 赋值作用
val(function(index,value)) 设置元素值
15.过滤选择器
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()
16.一些方法？
children(); 获取子元素
find(); 用于查找表达式
next(); 获取下一个元素
nextAll(); 获取下一个所有元素
parent(); 获取父元素
parents(); 获取所有匹配元素的祖先元素的集合
prev(); 获取前一个元素
prevAll(); 获取之前所有同辈元素
siblings(); $("div").siblings()
add();
$("p").add("span")
$("p").add("<span>da</span>");
<p></p><span>da</span>
17.文档处理
append() 中间插入
<p></p>
$("p").append("<div></div>");
<p><div></div></p>
appendTo();
<p></p><div><div>
$("p").appendTo("div");
<div><p></p></div>
prepend() 元素内部前置内容
<p>hello</p>
$("p").prepend("<b></b>");
<p><b></b>hello</p>
$("p").prependTo("<b></b>");
<b><p></p></b>
after(); 在后面追加
before(); 在前面追加
$("p").insertAfter("#foo");
<divid="foo">da</div><p>da</p>
$("p").insertBefore("#foo");
<p></p><divid="foo"></div>
18.请写出jquery的语法？
$(function(){// 程序段})
19.请问什么是DOM对象？
DOM对象，DOM为文本对象模型，DOM的每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素的对象，就是DOM对象。
var txt = document.getElementById("text").value;
20.通过jquery自身的方法获取页面元素的对象，就是jquery对象。
var txt=$("#text").val();
$("#text").toggleClass("txtClick").html("点击后切换样式");
21.jquery选择器有哪些？
jquery选择器有：
基本选择器，层次选择器，过滤选择器，表单选择器四大类。
过滤选择器分6种：
简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器。
基本选择器：
#id 根据给定的id进行匹配一个元素
element 根据给定的元素名进行匹配所有元素
.class 根据给定的类匹配该类的所有元素
* 匹配所有元素
selector1,selector2 匹配给定的元素，合并一起
22.请问你能写出dom结构吗？
html下head,body
head下title,style
body下table,div,p,ul
table下tr
div下span
ul下li
23.给定属性操作，描述作用
复制节点
clone()复制元素本身; clone(true)复制元素和所有功能
$(this).clone().appendTo("span"); $(this).clone(true).apendTo("span");
替换节点
replaceWith(content) 将选择的元素替换成指定内容
$("span").replaceWith("<p>dashu</p>");
replaceAll(selector) 将选择的元素替换成指定的selector的元素
$("<p>dashu</p>").replaceAll("#text");
包裹节点
wrap(html): 将所有选择的元素用其他字符串代码包裹起来
wrap(elem): 将所有选择的元素用其他Dom元素包裹起来
wrap(fn)
unwrap() 移除所选元素的父元素或包裹的标记
wrapAll(html), wrapAll(elem)
wrapInner(html), wrapInner(elem)
wrapInner(fn)
wrap(html), wrapInner(html);包裹外部元素包裹元素内部的文本
<p><span>da</span></p>
$("p").wrap("<b></b>");
<b><p><span>da</span></p></b>
$("span").wrapInner("<i></i>");
<p><span><i>da</i></span></p>
遍历元素
each()方法 进行元素的遍历
删除元素
remove() 删除该元素
empty() 清空全部节点或所有后代元素
24.怎么阻止冒泡过程？
stop Propagation(); 阻止冒泡过程
25.ready()方法和onload()方法的区别？
onload()方法要等页面中全部元素加载到浏览器中才执行，如果页面中存在大量图片，要等这些内容加载完毕。
ready()方法只要页面的dom模型加载完毕即可，就会触发ready()。
26.请写出ready()相同方法？
$(document).ready(function(){});
$(function(){});
jQuery(document).ready(function(){});
jQuery(function(){});
27.bind()方法绑定事件有了解吗？
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 });
28.写出一个映射方式？
$(function(){$(".txt").bind({focus:function(){};},{change:function(){}})})
29.hover()方法和toggle()方法区别？
$("a").hover(function(){// 执行一 }, function() { // 执行二 });
hover(over,out)
$("a").mouseenter(function(){});
$("a").mouseleave(function(){});
toggle()方法可以依次执行函数
toggle(fn,fn2,fn3...);
30.说明unbind()方法的使用？
unbind() 可以移除元素的绑定事件
unbind([type], [fn])
移除全部事件unbind();
31.one()方法和trigger()方法的使用？
one()方法可以将所选选的元素绑定一个触发一次的处理函数
one(type, [data], fn);
trigger()自动执行, triggerHandler()方法进行取消
trigger()方法 trigger(type, [data]) 所选择的元素上触发指定事件
32.请写出显示和隐藏效果代码？
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]);
33.切换元素可见状态的方法？
toggle() 方法如果显示状态，就变成隐藏状态，如果是隐藏状态，就变成显示状态。
toggle()
toggle(switch)switch为布尔值，true显示元素，反之隐藏
toggle(speed,[callback])
34.请写出滑动效果？
slideDown()方法和slideUp()方法
slideDown(speed,[callback])
slideUp(speed,[callback])
slideToggle(speed,[callback]) 以动画效果切换所选择的元素
35.请写出淡入淡出效果？
fadeIn()与fadeOut()方法进行淡入淡出效果。
fadeIn(speed,[callback]) 实现淡入动画效果
fadeOut(speed,[callback]) 现实淡出的动画效果
fadeTo()方法给定透明度值
fadeTo(speed,opacity,[callback]);
36.简单的动画效果？
animate(params,[duration],[easing],[callback])
<scripttype="text/javascript">
$(function(){ $("p").click(function(){
$(this).animate({height: 100}, "slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:50},"slow");
}) })
</script>
37.实现效果动画的停止和延时？
stop([clearQueue],[gotoEnd]) 停止正在执行的动画,
clearQueue是布尔值，是否停止正在执行的动画，
gotoEnd是布尔值，是否完成正在执行的动画。
delay(duration,[queueName]) 延时动画效果
show()和hide()方法 实现动画效果的显示和隐藏
slideUp()和slideDown() 实现“上下”的动画效果的显示和隐藏
fadeTo() 实现指定的透明度的效果
toggle() 方法进行切换效果，显示和隐藏
slideToggle() 方法可以上下显示和隐藏的效果
animate() 方法进行自定义元素的动画
38.使用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");
网友评论