认识了解jQuery

2019-07-23  本文已影响0人  学的会的前端

学习网站

为什么要用 jQuery

什么时候适合用 jQuery

什么时候不用 jQuery

jQuery 做什么

jQuery是一个库，是一个工具包，里面有各种各样的小工具，包括

jQuery版本

jQuery 的两种 API（使用方式）

//1. $.(函数名)
$.noConflict()
$.each()
//2. $.(元素选择器).(函数名)
$('ul').addClass()
$('p').text('hi')

jQuery的ready，window.onload和$(handler)的区别

jQuery选择器

使用jQuery获取元素

jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器。
在这里http://jquery.cuishifeng.cn/直接查找响应的API即可。

$('xxx') === document.querySelector('xxx')
结果为false

当用$选择一些元素时，获取的是JQuery对象，所以只能使用jQuery方法。所以API是jQuery对象的API，不是原生DOM 的API。

$('xxx').html('123')  // true
document.querySelector('xxx').html('123')   // false
document.querySelector('xxx').innerHTML = '123'    // true

$('xxx')[0]  // jQuery对象就可以转换成原生对象
$('xxx')[0].innerText = '123'    // true
$(document.querySelector('xxx'))  //DOM对象就可以变成jQuery对象。
$(document.querySelector('xxx')).html('123')  // true

$('xxx').eq(n)  // 得到的是jQuery对象

兄弟元素获取

$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素

$('li.third-item').siblings()

$('li.item-a').parent()

$('li.item-a').parents('div')

$('ul.level-2').children()

$('ul').find('li.current');
筛选当前结果集

$('li').filter(':even')
$('li').filter(function(index) {
  return index % 3 == 2;
})

    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

$('li').has('span')

jQuery DOM操作

创建元素

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

var obj = $('<div class="test"><p><span>Done</span></p></div>');
$('div') //创建了一个div
$('<div id = "header>xxxx</div>')   // 创建一个DOM元素

添加元素

  1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
  2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
var li = $('<li>4</li>')
$('.container #wrap').append(li) 
//在最末尾添加一个li

var li = $('<li>4</li>')
li.appendTo($('.container #wrap'))
//在最末尾添加一个li

var li2 = $('<li>0</li>')
$('.container #wrap').prepend(li2)
//在最开始添加一个元素li

var li2 = $('<li>0</li>')
li2.prependTo($('.container #wrap'))
//在最开始添加一个元素li

var div = $('<div>llll</div>')
$('.container').before('div')
//在.container的整体外部前面添加一个div。

var div2 = $('<div>22222</div>')
div2.insertBefore($('.container'))
//在.container的整体外部前面添加一个div。

var div = $('<div>llll</div>')
$('.container').after('div')

var div2 = $('<div>22222</div>')
div2.insertAfter($('.container'))

删除元素

$('#wrap').remove()

$('.container').empty()

包裹元素

  1. 当没有传递参数的时候，返回元素的innerHTML
  2. 当传递了一个string参数的时候，修改元素的innerHTML为参数值
    看个例子
$('div').html()
$('div').html('123')

后续这种读写两用的方法很多，原理都类似
如果结果是多个进行赋值操作的时候会给每个结果都赋值
如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值

jQuery事件

事件处理中最头疼的就是浏览器兼容问题，jQuery封装了很好的API，可以方便的进行事件处理
在1.7之前的版本中jQuery处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用on（绑定事件）/off（解绑事件）方法

.on( events [,selector ] [,data ], handler(eventObject) )

  1. 各参数含义
//普通事件绑定，最简单的用法
$('div').on('click',function(e){
  console.log(this)
  console.log(e)
});

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

//便于事件的分类及解绑
$('.box>ul').on('click.hello','li',function(){
   ......
    }
 $('.box>ul').off('click.hello')
    //添加.hello的作用是：便于解绑事件。对某个事件进行了多次绑定的时候，其他的绑定事件没有被解绑，只有添加了.hello的绑定被解绑了

//可以在绑定的饿时候给事件处理程序传递一些参数
$('div').on('click',{name:'lili',age:23},function(e){
  console.log(e.data) //可以获取到{name:'lili',age:23}
});

//事件的简写
$('.box>ul').click(function(){
  .....
})
//因为对应的事件类型，都有其对应的方法。
或者
  1. 事件代理，事件委托的例子
<body>
  <div class = "box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    
  </div>
  <input id = "input" type = "text">
  <button id = 'btn'>添加</button>
  <div id = "wrap"></div>
  
  <script>
    //当点击li的时候，.wrap里面展示对应的文字
    /*
    $('.box>ul>li').on('click',function(){
      //this是原生对象的方法，要把它转换成jQuery对象$(this)
      var str = $(this).text() （=== var str = this.innerText()）
      $('#wrap').text(str)
    })*/
    //通过inut添加的元素点击无法展现内容，所以使用事件代理
    $('.box>ul').on('click','li',function(){
      //this是原生对象的方法，要把它转换成jQuery对象$(this)
      var str = $(this).text()
      //this仍然代表点击的元素li
      $('#wrap').text(str)
    }
    //当点击添加的时候，要把input里面的内容添加到ul中，作为ul的最后一个元素
    $('#btn').on('click',function(){
      //获取input元素里面的值
      var value = $('#input').val()
      $('.bix>ul').append('<li> +value+ </li>')
    })
  </script>
</body>

.off( events [, selector ] [, handler ] )

移除一个事件处理函数

$('.box li').off('click')

.trigger( eventType [, extraParameters ] )

触发事件，根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('li').eq(2).trigger('click')
//不需要用户点击，自动触发了点击事件
//也就是通过操作js模拟用户的点击

其他事件相关文档：https://www.jquery123.com/category/events/browser-events/

jQuery属性&CSS操作

属性相关

$('input').val()
$('input').val('newValue');
//原生DOM的方式
$('input')[0].value = '123'
  1. .attr(attributeName):获取元素特定属性的值
  2. .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ):为元素属性赋值
$('#ipt').attr('type')  // 获取type的值
$('#ipt').attr()   //报错
$('#ipt').attr('type','checkbox')  //设置type的值
$('xxx').attr('id')  //读取ID的值

CSS相关

$('xxx').css({height: '30px','border':'1px solid red'})
//原生js
var xxx = document.querySelector('xxx')
xxx.style.backgroundColor = 'blue'
上一篇下一篇

猜你喜欢

热点阅读