博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web前端JQuery面试题(二)
阅读量:5223 次
发布时间:2019-06-14

本文共 3810 字,大约阅读时间需要 12 分钟。

Web前端JQuery面试题(二)

Web前端JQuery面试题(二)

1.请写出jquery的语法?

window.onload=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 获取含有子元素或文本的元素如:
dashu
,

可见性过滤选择器:

: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) : 向所选择的元素内部插入内容

$("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("

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()清空全部节点或所有后代元素

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

达叔小生:往后余生,唯独有你

You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

转载于:https://www.cnblogs.com/dashucoding/p/10414907.html

你可能感兴趣的文章
3月14日-15日学习总结
查看>>
关于 ++x 和 x++ 比较难的一个例子
查看>>
第三次作业 105032014021
查看>>
记录一些容易忘记的属性 -- UILabel
查看>>
android新手关于左右滑动的问题,布局把<android.support.v4.view.ViewPager/><ImageView/> 放在上面就不行了。...
查看>>
人脸识别FaceNet+TensorFlow
查看>>
STL之map UVa156
查看>>
从Angular.JS菜鸟到专家
查看>>
再谈Vmware NAT的配置和路由流程
查看>>
javaScript数组去重方法汇总
查看>>
评价意见整合
查看>>
MySQL表的四种分区类型
查看>>
C++变量的“总分性”(Mereology)
查看>>
应用软件学习心得之mapgis功能学习
查看>>
二、create-react-app自定义配置
查看>>
Android PullToRefreshExpandableListView的点击事件
查看>>
Python学习(一)
查看>>
关于Matchvs一些使用心得与建议
查看>>
Gson获取json串中的key-value
查看>>
创建spring boot项目
查看>>