前端知识总结之JQuery篇(基础)

199 阅读1分钟

一.jQuery的本质上是一个函数 

二.jQuery入口函数操作:

 $(document).ready(function) (){});       

 $(function(){});        

 模拟window.onload的功能 $(window).on('load',function(){}); 

三.DOM对象和jQuery对象

  感念:  1.DOM对象:是通过DOM方式获取的页面中的元素。2.jQuery对象:是通过jQuery方式获取的页面中的元素.

  区别: 1.DOM对象只能使用DOM的相关功能 .  2.jQuery对象只能使用jQuery的相关功能

  关系: 1.jQuery对象是DOM对象的包装集(jQuery对象里面放置了获取的DOM对象). 

           2.jQuery对象是一个伪数组结构,内部保存了DOM对象

  将jQuery对象转换为DOM对象: 

          1.根据下标获取内部的DOM对象:

 console.log($('div')[0]);    console.log($('div')[1]); 

          2.使用get方法进行DOM对象获取:

console.log($('div').get(0)); // 相当于$('div')[0]
console.log($('div').get(1)); // 相当于$('div')[1]

四.  jQuery的相关选择器:

       1 id选择器:通过#作为标识 // $('#box').text('这是box'); 

     2 类选择器:通过.作为标识 // $('.box').text('这是类名为box的元素'); 

     3 标签选择器:传入标签名 // $('div').text('这是div'); 

      4 子代选择器:通过>作为标识 // $('#list>li').css('backgroundColor', 'red'); 

      5 后代选择器:通过空格作为标识 // $('#list li').css('backgroundColor', 'red'); 

      6 根据下标操作的选择器: 

           6.1 获取元素中下标为偶数的部分元素,通过:even进行标识 // $('li:even').text('这是下标为偶数的li'); 

           6.2 获取元素中下标为奇数的部分元素,通过:odd进行标识 // $('li:odd').text('这是下标为奇数的li'); 

           6.3 根据指定下标获取元素,通过:eq()进行标识 // $('li:eq(2)').text('这是第三个li');

  五.筛选选择器:  是通过方法形式来使用,目的是为了完善jQuery的链式编程写法

      参数是选择器字符串,可以选取子元素中的某些部分,默认选择所有 // $('#list').css('width', 200).children().css('backgroundColor', 'red'); $('#list').children('.item').text('这是具有item类名的li');

    1.children()  子代选择器

    2.find() 后代选择器 ---find 不传参数不能使用,功能会被忽略,必须传入参数,是一个选择器字符串

    3.parent() 父元素选择器  --具有参数,不传时获取所有父元素,如果传入根据选择器选择某些父元素

    4.parents () 祖先元素选择器 ---parents不传参数,会获取所有的外部的祖先元素-

    5.siblings() 获取同级元素 ---选择器参数,可选

    6.prev() 和next()获取同级的上一个或下一个元素  ---选择器参数,可选

    7.prevAll() 和nextAll() 获取同级前面的所有元素 或 后面的所有元素  --选择器参数,可选