jQuery Dom相关试题-CSDN博客

1.以下 jQuery 方法有什么作用？如何使用？给出范例

.append() 添加元素 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象 eg: $( ".inner" ).append( "<p>Test</p>" )

.prepend()向对象头部追加内容，用法和append类似，内容添加到最开始。 

.before() ...的前面是... eg: $(".child").before($("parents") child的前面是parents。

.after() 和before相反。

.remove() 删除元素 eg:$(div).remove($('.ok')) 删除'div'下'ok'元素,子元素连同它一起被删除。

.empty() 清空被选元素内所有子元素，但是自己还在。eg：$('body').empty()

.html() 当没有传递参数的时候，返回元素的innerHTML,当传递了一个string参数的时候，修改元素的innerHTML为参数值。 eg :$('div').html() eg :$('div').html('123')

.text() 和html方法类似，操作的是DOM的innerText值。
复制代码

2.$$node.text()和$node.html()有什么区别？

$node.text()； 属性表示一个节点及后代的文本内容；
$node.html();  属性表示一个节点及其后代的标签结构
复制代码

3.介绍以下 jQuery的用法，给出范例

.val()  这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值。 eg :$('input').val() eg :$('input').val('newValue');
.attr() 获取元素特定属性的值 eg :var = title = $("em").attr('title')获取title属性的值。
.removeAttr() 删除属性 eg： $('div').removeAttr('id')
.prop() 用来获取或者操作元素的property
.css() 设置样式 eg :var color = $(this).css ("background-color": "red") 还可以批量设置 eg ：var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);
.css(proper
.addClass() 为元素追加class，不是覆盖，也不好检查重复，可以给页面上所有的比如（p）都添加class。
.removeClass() 移除元素单个or多个or所有class
.hasClass() 检查有无这个class，有为true，无为false。
.toggleClass() 切换class
复制代码

4.jQuery 对象和原生 Dom 对象有什么区别？如何相互转换？

• 原生dom转jQuery对象（对于一个dom对象，只需要用$()将dom对象给包装起来，就可以获得一个jQuery对象）

• jQuery对象转dom对象：jQuery对象是一个类数组对象，可以同过[ index ] 方法来得到相应的dom对象。

• 只有DOM对象才能使用DOM方法，jQuery对象不能使用dom中的方法，但是jQuery对象提供了一套更为完善的工具来操作DOM。

5.介绍以下 jQuery 方法的用法，给出范例。

.each() 遍历一个jQuery对象，为每个匹配元素执行一个函数。eg ：$( "li" ).each(function( index ) {
  console.log( index + ":" + $(this).text() );
});
$.extend() ($其实就是jQuery) 和each类似，不过功能更强大，可以遍历jQuery对象。
.clone() 直接看例子 eg ：$('.hello').clone.appendTo('goodbye') 把hello复制一下再放到goodbye下面。
.index() 获取下标 $('p').eq(20).index() //20
.ready() eg :$.(document).ready(function(){
  怎么描述呢？( 这里面放js内容，这样数据才能加载出来。)当DOM准备就绪时，指定一个函数来执行。

});
复制代码

6.window.onload和$(document).ready有什么区别? document.onDOMContentLoaded呢?

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
window.onload只能执行一次。
• $(document).ready()可以写多个，执行顺序是按照编写的顺序进行执行。
document.onDOMContentLoaded在页面中触发[DOMContentLoaded]事件时触发。此时，文档被加载和解析，并且DOM被完全构造，但链接的资源（例如图像，样式表和子帧）可能尚未被加载。