JQuery笔记

一、什么#### 1. jQuery概述

1-1、Javascript库：

• 即library，是一个封装好的特定的集合（方法和函数）。从封装一大推函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show等。

1-2、jQuery概念：

• jQuery是一个快速、简介的JavaScript库，封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互
• Jquery本质：就是学习调用这些函数（方法）；

1-3、Jquery的优点：

• 轻量级。核心文件比较小，不会影响页面的加载速度；
• 跨浏览器兼容，基本兼容了现在主流的浏览器；
• 链式编程、隐式迭代
• 对事件、样式、 动画支持，大大简化了DOM操作；
• 支持插件扩展开发。有着丰富的第三方的插件，如：树形菜单、日期控件、轮播图等
• 免费、开源

二、如何使是jQuery

1.jQuery的入口函数

1-1、入口函数的使用：

1. 原生

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

2. 简化

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

1-2、jQuery使用注意事项：

• 等着DOM结构渲染完毕后执行内部代码，不用等到所有外部资源加载完成，jQuery帮我们完成了封装。
• 相当于原生js的DOMContentLoaded；
• 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码；
• 推荐使用简化版的入口函数。

2.jQuery顶级对象$

• 在编写Jquery代码时，可以用$符号代替jQuery；

  // 1.$  ---- 推荐使用，简洁方便
  	$(function() {
       
          // 代码块
      })
  // 2.jQuery
  	jQuery(function() {
       
          // 代码块
      })
  

3.DOM对象和jQuery对象

3-1、使用：

1. 用原生JS获取来的对象就是DOM对象

   var div = document.querySelector('div');
   console.log('原生JS输出')；
   

2. jQuery方法获取的元素就是Jquery对象

   $('div');
   console.log('jQuery对象输出')；
   

3. JQuery对象本质是： 利用$对DOM对象包装后产生的对象（伪数组形式存储）；

3-2、DOM和Jquery相互转化：

1. DOM对象和Jquery对象之间是可以相互转换的；

2. 因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，需要进行转换使用；

3. DOM对象转换成Jquery对象： $(DOM对象)

   $(div)  // 不需要加引号
   

4. JQuery对象转换为DOM对象

   // 1.$(div)[index]  index是索引号
   	$(div)[index]；
   // 2.$(div).get(index)  index是索引号
       $(div).get(index)
   

三、jQuery常用API

1.常用Jquery选择器

1-1、jQuery基础选择器

• 原生JS获取元素方法很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准；

  $("选择器")   // 里面选择器直接写css选择器即可，但要加上引号
  

  名称	用法	描述
  ID选择器	$(“#id”)	获取指定的ID元素
  全选选择器	$(“*”)	匹配所有元素
  类选择器	$(“.class”)	获取同一类class的元素
  标签选择器	$(“div”)	获取同一类标签的所有元素
  并集选择器	$(“div,p,li”)	选择多个元素
  交集选择器	$(“li.current”)	交集元素

1-2、jQuery层级选择器

名称	用法	描述
子代选择器	$(“ul > li”)	使用>号，获取亲儿子层级的元素；
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取所有的li元素

1-3、jQuery隐式迭代

1. 遍历内部DOM元素(伪数组形式存储)的过程就是隐式迭代；
2. 隐式迭代就是给匹配的所有元素进行循环遍历，都执行相应的方法；

1-4、jQuery筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(index)”)	获取到li元素中的其中一个，索引号从0开始
:odd	$(“li:odd”)	获取li元素中，索引为级数的元素
:even	$(“li:even”)	获取li元素中，索引为偶数的元素

1-5、jQuery筛选方法

语法	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(‘li’)	相当于$(“ul>li”),最近一级
find(selector)	$(‘ul’).find(‘li’)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(‘ul’).siblings(‘li’)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(“ul”).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(‘ul’).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’)	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(‘li’).eq(index)	相当于$(“li:eq(index)”)，索引从0开始

1-6、jQuery排他思想

• 排除其他，留下自己

   $(function() {
       
          // 因为jQuery自带隐式迭代，所以不需要循环遍历
          $('button').click(function() {
       
              // 为当前元素加上背景色
              $(this).css('background','red');
              // 排除当前元素的兄弟元素
              $(this).siblings('button').css('background','');
          })
      })
  

  ‘

1-7、链式编程

// 给当前元素的背景色改为红色，同时清除当前元素兄弟背景色为空
$(this).css("background","red").siblings().css("background",'');

2.如何操作jQuery样式