前端学习笔记

jQuery

2019-07-30  本文已影响1人  饥人谷_island

jQuery介绍

  1. 为什么要用jQuery?
    全世界仍有大部分网站正在适用API,尽管它只是提供了一个友好的$('选择器')
  1. 什么时候该用jQuery?
  1. 什么时候不用jQuery?
  1. jQuery能做什么?
  1. jQuery的两种API
$.noConflict()
$.each()
$('ul').addClass()
$('p').text('hi')

jQuery选择器

选择器

  1. 规则类似与css的选择器
  1. .eq(index) .get([index])
    对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
    $('div').eq(3); // 获取结果集中的第四个jQuery对象
    我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象
    $('div')[2];
    $('div').eq(2);
    get()不写参数把所有对象转为DOM对象返回
  2. 兄弟元素获取
    .next([selector]), .prev([selector])
    next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
    $('.test').next();
    $('.test').prev('li');
    .nextAll([selector]), .prevAll([selector])
    nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
    .siblings([selectors])
    获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
    $('li.third-item').siblings()
    4.父子元素获取
    .parent([selector])
    取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
    $('li.item-a').parent()
    .parents([selector])
    获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
    $('li.item-a').parents('div')
    .children([selector])
    获得匹配元素集合中每个元素的子元素，选择器选择性筛选
    $('ul.level-2').children()
    .find([selector])
    查找符合选择器的后代元素
    $('ul').find('li.current');
  3. 筛选当前结果集
    .first()
    获取当前结果集中的第一个对象
    .last()
    获取当前结果集的最后一个对象
    .filter(selector), .filter(function(index))
    筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
    $('li').filter(':even')
    $('li').filter(function(index) { return index % 3 == 2; })
    .not(selector), .not(function(index))
    从匹配的元素集合中移除指定的元素，和filter相反
    .is(selector), is(function(index)), is(dom/jqObj)
    判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true
    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

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

使用jQuery实现Tab切换效果

预览Tab切换

$('.mei-tab .tab').on('click',function(){
  $(this).addClass('active')
         .siblings()
         .removeClass('active')  

   $(this).parents('.mei-tab')
       .find('.panel')
       .eq($(this).index())
       .addClass('active')
       .siblings()
       .removeClass('active')
})

jQueryDOM操作

创建元素

只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

添加元素

  1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象

  2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值

$( ".inner" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

删除元素

包裹元素

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" );
看看结果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrapAll( "<div class='new' />");
看看结果

    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
      </div>
    </div>

jQuery属性&CSS

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );`
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";});
//这里用id选择符举例是不是function永远最多迭代一次？
用类选择符是不是更好些？

CSS相关

var color = $( this ).css( "background-color" );
var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );

$( this ).css( "background-color", "yellow" );

$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

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

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

$( "#mydiv" ).hasClass( "foo" )

<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对象有什么区别?如何转换?

<script>
var box = document.getElementById('box');
var $box = $(box);
</script>

<script>
var $box = $('#box');  //这里$box是为了区别自己是jQuery对象
var box1 = $box[0];
var box = $box.get(0)
</script>

jQuery常用函数

$( "li" ).each(function( index ) {
  console.log( index + ":" + $(this).text() );
});
  1. 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
  2. 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

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

var object = $.extend({}, object1, object2);
在默认情况下，通过$.extend()合并操作不是递归的;

如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

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 );

通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果
$('.hello').appendTo('.goodbye');

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

但是我们如果需要的是复制而不是剪切，我们可以像下面这样写代码：
$('.hello').clone().appendTo('.goodbye');

  1. 没参数返回第一个元素index
  2. 如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
  3. 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

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

虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。

在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
下面两种语法全部是等价的：
$(document).ready(handler)
$(handler)
我们经常这么使用

$(function(){
    console.log('ready');
});

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

实现一种效果:点击icon后会却换播放和暂停两种状态

代码
核心代码

 <span class="play-pause"><i class="iconfont icon-pause "></i></span>
  <script>
    $('.play-pause').on('click', function(){
      var $iconfont =$(this).find('.iconfont') 
      $iconfont.toggleClass('icon-pause').toggleClass('icon-play')
    })
  </script>

jQuery事件

  1. events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
  2. selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
  3. data：当一个事件被触发时，要传递给事件处理函数的event.data
  4. handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
    看几个例子:
<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

<script>
$('.box li').on('click', function(){
    console.log(1)
  var str = $(this).text()
  $('#wrap').text(str)
})

//等同于
$('.box>ul>li').click(function(){
    console.log(2)
  var str = $(this).text()
  $('#wrap').text(str)
})

//也可以这样写
$('.box li').on('click.hello', function(){
    console.log(3)
  var str = $(this).text()
  $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')

//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})

//我们可以用事件代理
$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

//上面代码相当于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        //do something
    }
})

//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

直接绑定和事件代理分别如何使用呢?

使用 .on() 方法，这个方法能够直接绑定和代理事件。根据我们要实现的需求，我们需要使用代理事件来解决问题，也就是说我们把事件的绑定交给父级元素。

<div class="box" id="set" title="season">
<p class="set-c">春</p>
<p class="set-x">夏</p>
<p class="set-q">秋</p>
<p class="set-d">冬</p>
</div>
<div class="clone"> </div>

       <!-- 绑定事件 -->
       <script>
            $('p').click(function(){
                var str = $(this).text()
                $('.clone').text(str)  
            })
        </script>

         <!-- 代理事件 -->
       <script>
            $('.box').on('click.hello', 'p', function(){
                var str = $(this).text()
                $('.clone').text(str)
            })
        </script>
image.png

jQuery动画

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
//等价于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

jQueryAjax

 <script>
    $.ajax({
    url: 'http:://xx.com.php',
    type: 'GET', //method: 'POST',1.9之前使用“type”
    data: {
    username: 'shanghang',
    password: '123456',
    },
    dataType: 'json'
    }).done(function(result){
    console.log(result);
    }).fail(function(jqXHR,textStatus){
    console.log(taxeStatus);
    });
    //$.get直接获取
  $.get(url).done(function(ret){
  console.log(ret)
})
    //使用一个HTTP GET请求从服务器加载JSON编码的数
//据，这是一个Ajax函数的缩写，这相当于:
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});
    </script>

jQueryJsonp

    $.ajax({
        type:'get',
        url:'http://test.com/bookservice.php',
        dataType:'jsonp',
    }).done(function(ret){
        console.log(ret)
})
上一篇下一篇

猜你喜欢

热点阅读