前端面试题《JQuery》

$() 函数是 jQuery() 函数的别称,$()函数用于将任何对象包裹成 jQuery对象,接着被允许调用定义在jQuery对象上的多个不同方法。甚至可以将一个选择器字符串传入$()函数,它会返回一个包含所有匹配的DOM元素数组的jQuery对象。这个问题我已经见过好几次被提及,尽管它非常基础,它经常被用来区分一个开发人员是否了解jQuery。

jQuery支持不同类型的选择器,例如ID选择器、class选择器、标签选择器。鉴于这个问题没提到ID和class,可以用标签选择器来选择所有的div 元素。jQuery代码:$(\”div\”),这样会返回一个包含所有5个div标签的jQuery 对象。

这对于很多java零基础学jQuery的初学者来说是一个棘手的问题,其实是个简单的问题。$(this) 返回一个jQuery对象,你可以对它调用多个 jQuery方法,比如用text()获取文本,用val()获取值等等。而this代表当前元素,它是JavaScript关键词中的一个,表示上下文中的当前DOM元素。你不能对它调用 jQuery方法,直到它被 $() 函数包裹,例如 $(this)。

除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的jQuery版本, 那么它就不会再去下载它一次,因此今时今日,许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库,网站就能有非常好的展示机会。

方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对DOM进行了一轮查找,性能方面更加出色。

可以用 jQuery方法appendTo()将一个HTML元素添加到DOM树中。这是jQuery提供的众多操控DOM的方法中的一个。可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。

(1)get()取得所有匹配的DOM元素集合;

(2)get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素;

(3)append(content)向每个匹配的元素内部追加内容;

(4)after(content)在每个匹配的元素之后插入内容;

(5)html()/html(var)取得或设置匹配元素的html内容;

(6)find(expr)搜索所有与指定表达式匹配的元素;

(7)bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数;

(8)empty()删除匹配的元素集合中所有的子节点;

(9)hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法;

(10)attr(name)取得第一个匹配元素的属性值。

获取页面的元素;修改页面的外观;改变页面大的内容;响应用户的页面操作;为页面添加动态效果;无需刷新页面,即可以从服务器获取信息;简化常见的javascript任务。

jQuery选择器支持CSS里的选择器,jQuery选择器可用来添加样式和添加相应的行为,CSS中的选择器是只能添加相应的样式。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jquery 选择器用法大全附实例代码

学习jquery必不可少的一项技能就是需要学会使用jquery查找和操作html元素,这就是jquery选择器,小叶总结了下面一篇文章在我们开发中常用的jquery选择器的方法,欢迎收藏。

以下是一些常用的 jQuery 选择器及其实例代码:

  • $(\”element\”): 选择所有指定的元素。
  • $(\”#id\”): 选择具有指定 ID 的元素。
  • $(\”.class\”): 选择具有指定类的所有元素。
  • $(\”[attribute]\”): 选择具有指定属性的所有元素。
  • $(\”[attribute=value]\”): 选择具有指定属性值的元素。
  • $(selector1, selector2): 在第二个选择器中查找第一个选择器。
  • $(ancestor descendant): 选择祖先元素下的所有后代元素。
  • $(prev + next): 选择紧接在 prev 元素后的 next 元素。
  • $(prev ~ siblings): 选择 prev 元素之后的所有 siblings 元素。
  • $(parent > child): 选择父元素下的所有子元素。
  • $(\”:input\”): 选择所有表单输入元素(如 input、textarea、select)。
  • $(\”:text\”): 选择所有单行文本框。
  • $(\”:password\”): 选择所有密码框。
  • $(\”:radio\”): 选择所有单选按钮。
  • $(\”:checkbox\”): 选择所有复选框。
  • $(\”:submit\”): 选择所有提交按钮。
  • $(\”:reset\”): 选择所有重置按钮。
  • $(\”:contains(text)\”): 选择包含指定文本的元素。
  • $(\”:empty\”): 选择不包含子元素或文本的元素。
  • $(\”:has(selector)\”): 选择包含特定后代元素的元素。
  • $(\”:parent\”): 选择至少有一个子元素的元素。

如果你觉得这篇文章对你有用,欢迎点赞收藏加关注哦。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。