一:选择器
基本选择器
- 什么是
#id
,element
,.class
,*
,selector1, selector2, selectorN
?
答:
根据给定的id
匹配一个元素,用于搜索,通过id
的属性给定值。
案例:查找id
为da3
的元素
html代码:
<div id="da1"></div>
<div id="da2"></div>
<div id="da3"></div>
jquery代码:
$("#da3");
结果:
[ <div id="da3"></div> ]
html代码:
<div id="da:q"></div>
jquery代码:
$("#da\\:q");
根据给定的元素名匹配所有元素
案例,查找div
元素:
html代码:
<div> da1 </div>
<div> da2 </div>
<p>da3</p>
jquery代码:
$("div");
结果:
[ <div> da1 </div> , <div> da2 </div> ]
根据给定的类匹配元素
html代码:
<div class="dashu"> dashu </div>
<div class="da"> da </div>
jquery代码:
$(".da");
结果:
[ <div class="da"> da </div> ]
匹配所有元素*
html代码:
<div> 1 </div>
<p> 2 </p>
jquery代码:
$("*");
结果:
[ <div> 1 </div>, <p> 2 </p> ]
将每一个选择器匹配到的元素合并后一起返回:
html代码:
<div class="da"></div>
<p></p>
<span></span>
jquery代码:
$(".da, p, span");
结果:
[ <div class="da"></div>, <p></p>, <span></span> ]
层级选择器
2.后代选择器,子代选择器,next
,siblings
描述?
给祖先元素下匹配所有的后代元素
html代码:
<table>
<input id="da"></input>
<input id="da2"></input>
<p></p>
</table>
jquery代码:
$("table input");
结果:
[ <input id="da"></input>, <input id="da2"></input> ]
给父元素下匹配所有子元素:
html代码:
<table>
<input id="da"></input>
<p>
<input id="da2"></input>
</p>
<p></p>j
</table>
jquery代码:
$("table > input");
结果:
[ <input id="da"></input> ]
匹配所有prev
元素后的next
元素:
html代码:
<table>
<p>
<input id="da"></input>
</p>
<p>
<input id="da2"></input>
</p>
<p></p>
</table>
jquery代码:
$("p + input");
结果:
[ <input id="da"></input>, <input id="da2"></input> ]
匹配prev
元素后的所有siblings
元素:j
找出同辈的元素
html代码:
<table>
<p>
<input id="da"></input>
</p>
<p>
<input id="da2"></input>
</p>
<p></p>
</table>
<input id="da3"></input>
jquery代码:
$("table ~ input");
结果:
[ <input id="da3"></input> ]
- 基本选择器
:
?
:first :last :not :even :odd :eq :gt :lt :header :animated
获取第一个元素
<ul>
<li>1</li>
<li>2</li>
</ul>
$("li").first();
或
$("li :first");
[ <li>1</li> ]
获取最后一个元素
<ul>
<li>1</li>
<li>2</li>
</ul>
$('li').last();
$("li :last");
[ <li>2</li> ]
去除所有与给定选择器匹配的元素
查找所有未选中的 input
元素
<input name="da1" />
<input name="da2" checked="checked" />
$("input:not(:checked)")
[ <input name="da1" /> ]
匹配所有索引值为偶数的元素
<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> ]
匹配所有索引值为奇数的元素
匹配所有索引值为奇数的元素
<table>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
$("tr:odd")
[ <tr><td>1</td></tr> ]
匹配一个给定索引值的元素
<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> ]
匹配所有大于给定索引值的元素
<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> ]
匹配所有小于给定索引值的元素
<table>
<tr><td>0</td></tr>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>
j
$("tr:lt(2)")
[ <tr><td>0</td></tr>, <tr><td>1</td></tr>]
匹配标题元素
<h1>1</h1>
<p>1</p>
<h2>2</h2>
<p>2</p>
$(":header");
[ <h1>1</h1>, <h2>2</h2>]
匹配所有正在执行动画效果的元素
4.内容选择器的描述?
:contains :empty :has :parent
匹配包含给定文本的元素
匹配所有不包含子元素或者文本的空元素
匹配含有选择器所匹配的元素的元素
匹配含有子元素或者文本的元素
5.可见性选择器
:hidden :visible
匹配所有不可见元素
display:none
type="hidden"
匹配所有的可见元素
- 属性选择器的描述?
[attribute]
[attribute = value]
匹配给定的属性是某个特定值的元素
[attribute != value]
匹配所有不含有特定的属性
[attribute ^= value]
匹配给定的属性以某值开始的元素
[attribute $= value]
匹配给定的属性以某值结尾的元素
[attribute *= value]
匹配有包含某些值的特定元素
[selector1][selector2]
同时满足多个条件使用
$("div[id]");
<div>
<p></p>
</div>
<div id="da"></div>
获取
[<div id="da"></div>]
$("div [id='da']")
- 选择器-子元素有哪些?
:nth-child
从1开始的,匹配父元素下第n个元素
$("ul li:nth-child(2)"); 获取2 3 4。。
: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元素
- 在jquery中有哪些属性?
attr(name);
获取属性值
attr(properties);
以“名/值对”对象添加属性
attr(key,value);
为所匹配的元素设置属性值
attr(key, function(index, attr));
为所匹配的元素设置属性值
removeAttr(name);
删除属性
- 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,反之删除
- html代码?
html()
获取html内容
html(val)
设置html内容的值
html(function(index, html));
设置html内容的值
- 文本有哪些?
text()
获取元素内容
text(val)
设置内容文本
text(function(index, text))
设置内容文本
- 关于val有哪些?
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("<span>da</span>");
<p></p> <span>da</span>
- 文档处理
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");
<div id="foo">da</div><p>da</p>
$("p").insertBefore("#foo");
<p></p><div id="foo"></div>
wrap();
$("p").wrap("<div></div>");
<div><p></p></div>
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 获取所有不包含子元素或文本的空元素
如:<div></div>
:has(selector) 获取含所选择器的所有元素
:parent 获取含有子元素或文本的元素
如:<div>dashu</div>, <div><p></p></div>
可见性过滤选择器:
: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 = $("<p>dashucoding</p>");
内部插入
append(content) :
向所选择的元素内部插入内容
$("body").append($div);
append(function (index,html))
同上
appendTo:
把选择的元素追加到另一个指定的元素中
appendTo(content)
将一个元素插入另一个指定的元素中
前部分的内容插入其后部分的内容
$("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("<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()
清空全部节点或所有后代元素
1.怎么阻止冒泡过程?
stopPropagation(); // 阻止冒泡过程
2.ready()
方法和onload()
方法的区别?
onload()
方法要等页面中全部元素加载到浏览器中才执行,如果页面中存在大量图片,要等这些内容加载完毕。
ready()
方法只要页面的dom
模型加载完毕即可,就会触发ready()
。
3.请写出 ready()
相同方法?
$(document).ready(function(){});
$(function(){});
jQuery(document).ready(function(){});
jQuery(function(){});
4.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 });
5.写出一个映射方式?
$(function(){ $(".txt").bind({ focus: function(){}; }, { change: function() {} }) })
6.hover()
方法和toggle()
方法区别?
$("a").hover(function(){ // 执行一 }, function() { // 执行二 });
hover(over, out)
$("a").mouseenter(function(){});
$("a").mouseleave(function(){});
toggle()
方法可以依次执行函数
toggle(fn, fn2, fn3...);
7.说明unbind()
方法的使用?
unbind()`可以移除元素的绑定事件:`unbind([type], [fn])
移除全部事件 unbind();
8.one()
方法和trigger()
方法的使用?
one()
方法可以将所选选的元素绑定一个触发一次的处理函数
one(type, [data], fn);
trigger()
自动执行, triggerHandler()
方法进行取消
trigger()方法 trigger(type, [data]) 所选择的元素上触发指定事件
9.请写出显示和隐藏效果代码?
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]);
10.切换元素可见状态的方法?
toggle()
方法如果显示状态,就变成隐藏状态,如果是隐藏状态,就变成显示状态。
toggle()
toggle(switch)
switch
为布尔值,true
显示元素,反之隐藏
toggle(speed,[callback])
11.请写出滑动效果?
slideDown()
方法和slideUp()
方法
slideDown(speed,[callback])
slideUp(speed,[callback])
slideToggle(speed,[callback])
以动画效果切换所选择的元素
12.请写出淡入淡出效果?
fadeIn()
与fadeOut()
方法进行淡入淡出效果。
fadeIn(speed,[callback]) 实现淡入动画效果
fadeOut(speed,[callback]) 现实淡出的动画效果
fadeTo()方法给定透明度值
fadeTo(speed,opacity,[callback]);
13.简单的动画效果?
animate(params,[duration],[easing],[callback])
<script type="text/javascript">
$(function(){
$("p").click(function(){
$(this).animate({height: 100}, "slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:50},"slow");
})
})
</script>
14.实现效果动画的停止和延时?
stop([clearQueue],[gotoEnd]) 停止正在执行的动画,clearQueue是布尔值,是否停止正在执行的动画,gotoEnd是布尔值,是否完成正在执行的动画。
delay(duration,[queueName])延时动画效果
show()和hide()方法 实现动画效果的显示和隐藏
slideUp()和slideDown() 实现“上下”的动画效果的显示和隐藏
fadeTo()实现指定的透明度的效果
toggle()方法进行切换效果,显示和隐藏
slideToggle()方法可以上下显示和隐藏的效果
animate()方法进行自定义元素的动画
15.使用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");
16.什么是Ajax
呢?
Ajax
是Asynchronous JavaScript and XML
的缩写,核心是通过XMLHttpRequest
对象进行异步获取的方法,向服务器发送数据请求,通过这个对象进行接收请求返回的数据。
jquery
中的load()
方法,进行获取异步数据。
load(url, [data], [callback]);
$.getJSON(url,[data],[callback]);
$.getJSON("xxx.json", function(data){
$.each(data, function(InfoIndex, Info){
// 显示
})
})
通过全局函数getJSON()
可以获取.json
格式的文件内容
17.关于全局函数中的getScript()
通过全局函数getScript()
可以获取.js文件内容
$.getScript(url,[callback]) // 加载的js文件地址 和 加载成功时执行的回调函数
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.getScript("User.js");
})
})
</script>
$.getScript("User.js", function() { alert("加载成功"); });
18.全局函数get()
?
$.get(url, [data], [callback], [type]) 异步获取xml文档数据
$.get()请求数据
19.安全请求数据
$.post()请求数据
$.post(url, [data], [callback], [type]);
19.序列化表单效果
serialize()方法
<script type="text/javascript">
$("#btn").click(function(){
$.post("User.aspx", $("#formUser").serialize(),
function(data) {
$("div").empty.html(data);
})
})
</script>
20.底层方法$.ajax()
?
$.ajax([options]);
$.ajaxSetup([options]);
ajaxSuccess(callback) ajax请求成功时执行
ajaxStop(callback) ajax请求结束时执行
ajaxStart(callback) ajax请求开始时执行
ajaxComplete(callback) ajax请求完成时执行函数
ajaxError(callback) ajax请求发送错误时执行函数
ajaxSend(callback) ajax请求发送前执行函数