进阶14-jQuery选择器

作者: 24_Magic | 来源:发表于2017-03-23 10:52 被阅读28次

1. 说说库和框架的区别？

库的英语为 Library ( 简写 Lib )，框架的英语为 Framework。

库是一个一个封装好的代码，你需要哪个就调用哪个就可以了，使用的只是其中一部分，有面向对象的类库，有面向过程的函数库。优点：使用灵活，任意组装；缺点：需要自己搭建方案，建立各个部分的联系，过程相对繁琐，出现问题的几率高，耗时。

框架是一整套解决某个问题的系统化方案，你必须使用整个框架里规定的代码。优点：统一规范方便；缺点：难以自定义其中的某个部件

2.jquery 能做什么？

1.选取DOM元素
jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

  //简单例举基本选择器
$('\*')    //匹配所有
$('#id')    //id选择器
$('.class')    //类选择器
$('element')    //标签选择器

2.DOM操作
尾部追加DOM元素

// jQuery写法
$(parent).append($(child));
//DOM写法
parent.appendChild

头部插入DOM元素

//jQuery写法
$(parent).prepend($(child));
//DOM写法
parent.indertBefore(child,parent.childNode[0])

删除DOM

//jQuery写法
$(child).remove()
//DOM写法
child.parentNode.removeChild(child)

3.事件的监听

//jQuery写法        //DOM写法
Element.prototype.on = Element.protype.addEventListener;

4.事件的触发

Element.protype.trigger = function (type, data){
var event = document.createEvent('HTMLEvents');
event.initEvent(type, true, true);
event.data = data || {};
event.eventName = type;
event.target = this;
this.dispatchEvent(event);
return this;
};

5.document.ready

目前的最佳实践，是将JavaScript脚本文件都放在页面底部加载。这样的话，其实document.ready方法（jQuery简写为$(function)）已经不必要了，因为等到运行的时候，DOM对象已经生成了。

6.atter方法

//jQuery方法
$("#picture").attr("src", "http://url/to/image");

//DOM方法
$("#picture").src = "http://url/to/image";

7.addClass方法

//jQuery方法
$('body').addClass('hasJS');

//DOM方法
document.body.className = 'hasJs';
// or
document.body.className += 'hasJS';

8.CSS

//jQuery方法
$(node).css("color", red)

//DOM方法
element.style.color = "red";
// or
element.style.cssText += 'color:red';

9.数据储存

//jQuery方法
$("body").data("foo", 52);

//DOM方法
element.dataset.user = JSON.stringify(user);
element.dataset.score = score;

10.Ajax

//jQuery方法
$.ajax({
type: "post",
url: "some.php",
data: {
name: "John", location: "Boston"
}
}).done(function(msg){
alert("Data Saved: " + msg);
})

//DOM方法
function request(type, url, opts, callback) {
　　　　var xhr = new XMLHttpRequest();
　　　　if (typeof opts === 'function') {
　　　　　　callback = opts;
　　　　　　opts = null;
　　　　}
　　　　xhr.open(type, url);
　　　　var fd = new FormData();
　　　　if (type === 'POST' && opts) {
　　　　　　for (var key in opts) {
　　　　　　　　fd.append(key, JSON.stringify(opts[key]));
　　　　　　}
　　　　}
　　　　xhr.onload = function () {
　　　　　　callback(JSON.parse(xhr.response));
　　　　};
　　　　xhr.send(opts ? fd : null);
　　}

//基于request函数，模拟jQuery的get和post方法
var get = request.bind(this, 'GET');
var post = request.bind(this, 'POST');

11.动画

//jQuery方法
$foo.animation('slow', { x : '+=10px'});

jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。

//DOM方法
foo.classList.add('animate');
//使用回调函数
el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);

12.替代方案
由于jQuery体积过大，替代方案层出不穷。
其中，最有名的是zepto.js。它的设计目标是以最小的体积，做到最大兼容jQuery的API。zepto.js 1.0版的原始大小是55KB，优化后是29KB，gzip压缩后为10KB。

3.jquery 对象和 DOM 原生对象有什么区别？如何转化？

联系：
jQuery对象是通过包装DOM原生对象生成的对象。
两者之间可以互相转换。

区别：
jQuery与原生JS取得的对象不同，两者不等价。
jQuery与DOM对象各自的方法不能互用，会报错

相互转换：
1.jQuery对象转换成DOM对象

//[index]，转换单个jQuery对象
var $box = $('.box')     //jQuery对象
var box = $('.box')[0]     //DOM对象

<----------------------------------------------->

//.get(index)，不添加index可以将结果集全部转换
var $box = $('.box')     //jQuery对象
var box = $box.get(0)    //DOM对象

2.DOM对象转换成jQuery对象

//用$()将DOM对象装起来
var box = document.querySelector('.box')    //DOM对象
var $box = $(box)    //jQuery对象

4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

绑定事件

// 推荐用法on,还可用bind
$('div').on('click', function(e){
    console.log(this);
    console.log(e);
});

bind、unbind、delegate、live、on、off都是操作事件的方法

//bind方法，添加点击事件,3.0已弃用
$( "table" ).bind( "click",  function() {
  $( this ).toggleClass( "chosen" );
});

//delegate方法，添加点击事件
$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

//等同于这个on方法
$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});

//unbind off都是取消事件
<-------------------------------------->

var foo = function() {
  // Code to handle some kind of event
};

//给$("p")添加点击事件，每当点击的时候触发foo这个函数
$( "p" ).live( "click", foo );

//给$("p")添加点击事件，每当点击的时候取消触发foo这个函数
$( "p" ).die( "click", foo );

事件代理

/* 
 * 事件委托或者事件代理
 * 想让div下面所有的span绑定事件
 * 可以把事件绑定到div上
 */
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

5.jquery 如何展示/隐藏元素？

.div {
//...
  display: none;
}
.active{
  display: block;
}

//通过添加删除class
$('.btn').on('click', function(){
  $('.div').addClass('active')
  $('.div').removeClass('active')
})

//通过判断class的有无，有就去掉，没有就加上
$('.btn').on('click', function(){
  $('.div').toggleClass('active')
})

<------------------------------------>

//动画效果，hide()和show(),fadeIn()和fadeOut(),slideUp()和slideDown()
$('.btn1').on('click', function(){
  $('.div').hide();
 // $('.div').fadeIn();
 // $('.div').slideUp();
})
$('.btn2').on('click', function(){
  $('.div').show();
 //$('.div').fadeOut();
// $('.div').slideDown();
})

//动画效果，toggle(),fadeToggle(),slideToggle()
$('.btn3').on('click', function(){
  $('.div').toggle();
  //$('.div').fadeToggle();
  //$('.div').slideToggle();
})

//动画效果，非toggle()
$('.btn4').on('click', function(){
  if($('.div').css('display', 'none'){
    $('.div').show()
    //$('.div').fadeOut()
    // $('.div').slideDown();
  })else{
    $('.div').hide()
    //$('.div').fadeIn()
    // $('.div').slideUp();
  }
})

//一个回到顶部的简易代码
<div class="go-top">顶部</div>
<style>
  .go-top{
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 60px;
    height: 100px;
    color: #fff;
    background-color: #6ff;
    display: none;
  }
</style>
<script>
  
  $(window).on('scroll', function(){
    var top = $(window).scrollTop()
    if(top>100){
      $('.go-top').css('display', 'block');
    }else{
      $('.go-top').css('display', 'none');
    }
  })
  $(window).on('click', function(){
     $(window).scrollTop(0)
   })
</script>

6. jquery 动画如何使用？

简而言之，服从正交原则，使用jQuery时，不去干扰HTML和CSS
推荐使用增加或者去除class的方法给DOM添加动画效果

当需要自定义动画时，可以使用animate

$('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });

7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

获取HTML内容

$('.box').children('li')
$('.box').find('.box>li')
$('.box').html()

设置HTML内容

增：
//.inner内部末尾添加内容
$( ".inner" ).append( "<p>Test</p>" );
$( "<p>Test</p>" ).appendTo( ".inner" );

//.inner内部头部添加内容
$( ".inner" ).prepend( "<p>Test</p>" );
$( "<p>Test</p>" ).prependTo( ".inner" );

//与.inner同级，在.inner之前插入内容
$( ".inner" ).before( "<p>Test</p>" );
$("<p>Test</p>").insertBefore($(".inner"));

//与.inner同级，在.inner之后插入内容
$( ".inner" ).after( "<p>Test</p>" );
$( "<p>Test</p>" ).insertAfter( ".inner" );

<---------------------------------------------------------->

删：
//删除.test的所有子元素包括.test本身
//再次添加该元素时，绑定在元素上的事件无效
$('div').remove('.test');

//删除body的所有子元素
$('body').empty();

//删除.test的所有子元素包括.test本身
//再次添加该元素时，绑定在元素上的事件有效
$('div').detach('.test');

获取元素内部文本

$('div').text()

设置元素内部文本

$('div').html('123')
$('div').text('123')
<------------------------------->
$( ".inner" ).append( "<p>Test</p>" );
$( ".inner" ).remove( "<p>Hello</p>" );

8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

获取表单用户的value

$('input').val()

设置表单用户的value

$('input').val('newValue');

获取元素的属性

var title = $( "em" ).attr( "title" );

设置元素的属性
attr方法

//改变指定属性的value
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

//给匹配的所有元素移除指定的属性
$('div').removeAttr('id');

class方法

//添加class，不会覆盖，不会重复
$( "p" ).addClass( "myClass yourClass" );

//移除元素单个/多个/所有class
$( "p" ).removeClass( "myClass yourClass" );

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

  <------------------------------------->

//切换元素的class的有无
<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>

9.
导航

10.

Tab切换

11.

添加元素

进阶14-jQuery选择器

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读