jQuery

2018-08-27  本文已影响0人  礼知白

jQuery 1.x 版本和 2.x 版本有什么区别

介绍 jQuery 常见的选择器，以及以下 api 的用法，给出范例

jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。讲jQuery不得不提到其选择器，这是jQuery能够快速流行的非常重要的原因，为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="ok">ok</div>
  </div>
</body>
</html>
.eq

对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
$('.contaniner').eq(3); // 获取class为child的结果集中的下标为3的jQuery对象

.next / .prev

next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
$('.child').eq(1).next()//获取class为child且下标为1的元素紧跟着的同辈元素
$('.child').eq(1).prev()//获取class为child且下标为1的元素之前的同辈元素

.nextAll / .prevAll

nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素。
$('.child').eq(2).nextAll()//获取class为child且下标为1的元素后面的所有同辈元素
$('.child').eq(2).prevAll()//获取class为child且下标为1的元素前面的所有同辈元素

.siblings

获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。
$('.ok').sibings()//获取class为ok的所有邻居

.parent / .parents

.children / .find

区别：
.children(selector)方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选。
.find(selector)方法是返回匹配元素集合中每个元素的后代。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。

.find()方法要注意的知识点：

  1. find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
  2. 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
  3. find只在后代中遍历，不包括自己。
  4. 选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li')等价于$('li', 'li.item-ii')。
.filter(selector), .filter(function(index))

筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('.child').filter(function(index, node){
     return node.innerText.search('3') > -1
})//获取class为child的元素中包含文本‘3’的元素
.has

.has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的所有后代元素
$('.container').has.('.box')

.is

判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
$('.ok').is.('.ok')//true

使用 jQuery和原生js实现 Tab 切换效果

jQuery
原生js

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

.append()

将指定的内容插入匹配元素集合中每个元素的末尾。

$( ".inner" ).append( "<p>Test</p>" );//在class为innner的元素的末尾添加标签
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );//在标签p内的末尾加入字符串strong
$( "p" ).append( document.createTextNode( "Hello" ) );
.prepend()

向对象头部追加内容，用法和append类似，内容添加到最开始
$( ".inner" ).prepend( "<p>Test</p>" );//在class为innner的元素的开头添加标签

.before()

在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );
.after()

和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
.remove()

删除被选元素（及其子元素）
$("#div1").remove();//删除ID为div1的元素及其子元素
我们也可以添加一个可选的选择器参数来过滤匹配的元素
$('div').remove('.test');//删除ID为div1且class为test的元素

.empty()

清空被选择元素内所有子元素
$('body').empty();

.html()

这是一个读写两用的方法，用于获取/修改元素的innerHTML

$('div').html()
$('div').html('123')

后续这种读写两用的方法很多，原理都类似
如果结果是多个进行赋值操作的时候会给每个结果都赋值
如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值
注：当传递参数时，会将里面的数据放进去执行，如果内含script，会容易引发xss攻击

.text()

和html方法类似，操作的是DOM的innerText值
创建一个节点，然后把数据用.text()放入节点内部，再把节点放在页面上

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

node.text()只是会将里面的内容都显示出来。node.html()会将其进行解析之后再显示出来。若有传递包含script的参数，就会执行，可能会引入xss攻击容易形成漏洞。
text就不会这种问题，可创建一个节点，若是恶数据，只会展示。

介绍以下 jQuery 函数的用法，给出范例

.val()

这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

$('input').val()
$('input').val('newValue');
.attr()
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});
.removeAttr()

为匹配的元素集合中的每个元素中移除一个属性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
$('div').removeAttr('id');

.prop()

$('input').prop('value')//获取input中value属性
jQuery的attr与prop

.css()

这是个和attr非常相似的方法，用来处理元素的css

.addClass()

为元素添加class，不是覆盖原class，是追加，也不会检查重复

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});
.removeClass()

移除元素单个/多个/所有class

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});
.hasClass()

检查元素是否包含某个class，返回true/false
$( "#mydiv" ).hasClass( "foo" )

.toggleClass()

toggle是切换的意思，方法用于切换
如果没有就添加，如果有就删除

<div class="tumble">Some text.</div>
第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

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

var $v = $("#v") ;  //jQuery对象
var v = $v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

2、jQuery本身提供，通过.get(index)方法
　　如：

var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
　　如：

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

参考Dom原生对象和jQuery对象的联系、区别、相互转换

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

.each()

遍历一个jQuery对象，为每个匹配元素执行一个函数

$( "p" ).each(function( index ) {
            console.log( index + ':' + $(this).text())
            })
$.extend()

目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);

在默认情况下，通过$.extend()合并操作不是递归的;

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );

.clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果。如果我们要保留原元素，可以先clone一个再插入。
$('.hello').clone().appendTo('.goodbye');//class为hello的元素会保留

.index()

从给定集合中查找特定元素index
没参数返回第一个元素index
如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
看个例子

var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

.ready()

当DOM准备就绪时，指定一个函数来执行。
虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。
在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。
如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
下面两种语法全部是等价的：

$(document).ready(handler)
$(handler)
我们经常这么使用
$(function(){
    console.log('ready');
});

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

window.onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。
$(document).ready()时DOM结构绘制完毕后就执行，不必等到加载完毕。
document.onDOMContentLoaded等html文档被完全加载和解析时触发，而不等待样式表和图像等的加载。
MDN-Window.onload
MDN-DOMContentLoaded
jQuery-.ready

点击 icon 后会切换播放和暂停两种状态

http://js.jirengu.com/sahel/2/edit

上一篇下一篇

猜你喜欢

热点阅读