Jquery基础

JS库

简单理解，就是一个JS文件，里面对我们原生JS代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了

jquery的优点

• 轻量级。核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发。有丰富的第三方插件
• 免费，开源

jquery的入口函数

• 方式一：

  •  $(document).ready(function() {
     	// 此处是页面DOM元素加载完成的入口
     })
    

• 方式二：

  • $(function() {
    	// 此处是页面DOM元素加载完成的入口
    });
    

$符号详解

1. $ 是jquery的别称
2. $ 是JQuery的顶级对象，相当于原生JS的window。把元素利用 $ 包装成 jquery对象，就可以调用jquery的方法了

DOM对象和jquery对象

Jquery对象只能使用jQuery方法，DOM对象则使用原生的JS的属性和方法

• Dom对象

  • 用原生JS获取过来的对象就是DOM对象

  • var myDom = document.querySelector('div'); // myDom 就是DOM对象
    

• jQuery对象 是以伪数组的形式存储的

  • jquery方式获取过来的对象，就是jquery对象

  •  $('div') // jQuery对象
    

• 本质：通过 $ 把DOM元素包括起来

DOM对象和jquery之间的相互转换

• DOM对象转换为JQuery对象
  • $(DOM对象)
• JQuery对象转换为DOM对象
  • $('div')[index] 或者 $('div').get(index)

jQuery选择器

隐式迭代(重要)

遍历内部DOM元素(以伪数组形式存储)的过程，称为隐式迭代（简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用）

$('div').css('属性'，'值');
$('div').css('background'，'red');

链式编程(重要)

$(function(){
    $(this).css('color','red');
    $(this).siblings().css('color','');
    
   	// 链式编程 ==》 对应下面的写法 
    $(this).css('color','red').siblings().css('color',''); // 我的颜色为红色，我的兄弟的颜色为空
    
    $(this).siblings().css('color','red'); // 我的兄弟的颜色变为红色
})

jQuery样式操作

操作CSS方法

jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式

1. 参数只写属性名，则返回属性值

   $(this).css('color');
   

2. 参数是 属性名 属性值 逗号分隔 是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

   $(this).css('color','red');
   
   $(this).css('width','300px');
   $(this).css('width',300);
   

3. 参数可以是对象形式 属性名可以不用带引号，但是如果属性名是复合型式，需要使用驼峰命名法 属性值如果不是数字需要用引号

   $(this).css({
      'color':'white',
      'font-size':'20px'
   });
   或者下面的写法：
   
   $(this).css({
      color: 'white',
      fontSize:'20px'
   });
   

设置类样式

1. 添加类 addClass相当于是追加类名，不影响以前的类名

   原生JS中className会覆盖元素原先里面的类名

   $('div').addClass('类名')； 
   

2. 移除类

   $('div').removeClass('类名')；
   

3. 切换类 如果有这个类的话添加，没有这个类移除

   $('div').toggleClass('类名')；
   

jQuery效果

动画队列，及停止动画队列的方法

动画或者效果一旦触发，就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止动画 stop() 谁做动画，写在谁的前面

$(this).children('ul').stop().sildeToggle();

jQuery属性操作

1. 设置或者获取元素固有属性值 prop()

   • 所谓元素固有属性，就是元素本身自带的属性，比如 a 元素里面的 href , input 元素的 type

2. 获取属性语法： prop('属性')

3. 设置属性语法： prop('属性','属性值')

4. 自定义属性： attr()

   • 设置自定义属性： attr('属性名','属性值') 类似于原生的setAttributte()
   • 获取自定义属性： attr('属性名') getAttributte()
   • H5的自定义属性： data-xxx=“xxx” 模式 如果要是获取的话 attr('data-xxx')

5. 数据缓存 data() 这个里面的数据是存放在元素的内存里面的，在页面上并不能看到

   $('span').data('name','张三')；
   
   // 获取方式
   console.log($('span').data('name'));
   
   // 也可以使用这个方法，获取h5的自定义属性  1.不用写data-  2.返回值是数字型
   // data-index
   console.log($('div').data('index')); // 返回的结果是数字类型的
   $('div').attr('data-index'); // 返回的结果是字符串类型的