Web前端JQuery面试题(二)
Web前端JQuery面试题(二)
1.请写出jquery的语法?
<script type="text/javascript">
$(document).ready(function(){
// 程序段
})
</script>
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 获取所有不包含子元素或文本的空元素
如:<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()
清空全部节点或所有后代元素
结言
好了,欢迎在留言区留言,与大家分享你的经验和心得。
感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
Web前端JQuery面试题(二)的更多相关文章
- Web前端JQuery面试题(三)
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端JQuery面试题(一)
Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...
- web前端整套面试题(二)--今日头条面试题
12道单选,7道不定项选择,2道编程题 一.单选(12题) 1.[单选题]在HTML中,( )可以在网页上通过链接直接打开邮件客户端发送邮件. A.<a href=”telnet:ming.zh ...
- Web前端面试笔试题总结
最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...
- Web前端经典面试试题(二)
上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题 一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...
- web前端经典面试题大全及答案
阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...
- 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
##2017.10.30收集 面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
- 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
随机推荐
- JS继承(一)
突然发现自己很久没写过什么东西了 其实从博客更新的速度上就可以看出一个人近期有没有成长 对 …… 我没有成长 也可以由此看出自己选择的企业是不是对的 对 …… 我不会离职…… 略略略 来咬我啊…… 于 ...
- oracle错误(ORA:12154 ORA:01034 和 ORA:27101 ORA-18008 ORA-01081)
按照正常操作流程,启动项目,发现项目报错,原因是连接不上oracle数据库, PLSQL连接时报错,错误码 ORA:12154 无法解析指定的连接标识符 第一次,遇到这个错误,在网上找了资料都是需要 ...
- 网址导航18A
[导航] hao268 百度导航 泡泡导航 35Q网址导航 [名站] 百度 网易 腾讯 新华 中新 凤凰 [邮箱] 163邮箱 126邮箱 Yeah邮箱 QQ邮箱 阿里邮箱 189邮箱 [新闻] 联合 ...
- ASP.NET Core 项目简单实现身份验证及鉴权
ASP.NET Core 身份验证及鉴权 目录 项目准备 身份验证 定义基本类型和接口 编写验证处理器 实现用户身份验证 权限鉴定 思路 编写过滤器类及相关接口 实现属性注入 实现用户权限鉴定 测试 ...
- 利用css实现带有省略号的段落
带有省略号的段落就是你只能在一行显示一段文字,文字过长是肯定不能完全显示的,如果默认的话,超出的文字会自动换行,撑大盒子. 1.这时需要设置white-space: nowrap,禁止换行.这样的话, ...
- Ubuntu 18.04 下如何配置mysql 及 配置远程连接
首先是大家都知道的老三套,啥也不说上来就放三个大招: sudo apt-get install mysql-server sudo apt isntall mysql-client sudo apt ...
- mysql约束以及数据库的修改
一.约束 1.约束保证数据完整性和一致性. 2.约束分为表级约束和列级约束. (1)表级约束(约束针对于两个或两个以上的字段使用) (2)列级约束(针对于一个字段使用) 3.约束类型有: (1)NOT ...
- POJ 3162.Walking Race 树形dp 树的直径
Walking Race Time Limit: 10000MS Memory Limit: 131072K Total Submissions: 4123 Accepted: 1029 Ca ...
- .NET core RSA帮助类
解决 Operation is not supported on this platform 异常 直接上代码: public class RSAHelper { /// <summary> ...
- JavaScript中的闭包永远都存储在内存中,除非关闭浏览器
//閉包實現累加功能 function fn1() { var n = 1; add = function() { n += 1; } function fn2() { n += 1; console ...