jQuery框架基础（介绍、使用、获取元素与转换、常用API）

一、介绍

 

1. 首先理解库的概念：

是一个封装好的特定的集合，从而封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show等等

可以理解为仓库：可以把东西放在这个仓库，找东西时候只需要进入仓库即可

2. 优势

• 开源、免费
• 轻量级：核心文件kb单位
• 兼容所有主流浏览器
• 链式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持第三方插件扩展开发
  • 树形菜单、日期控制、轮播图等等

二、使用

1. 下载：

jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/

2. 引入到文件

3. 可以通过一个jQuery方法进行测试

$('隐藏对象').hide();

         

4. jQuery入口函数

• 等同于原生JS的DOMContentLoaded

• 等待页面的js，css，图片等外部文件加载完成再去执行

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

 4. $理解与获取元素

1. $是jquery的一个别称，在代码中使用jquery代替$
2. $是jquery的顶级对象，相当于js中的window
3. $('')  引号里包含获取的元素

     jQuery(function () {
        // alert(11);
        // $("div"). hiden();
        jQuery("div").hiden();
      });

5. jQuery对象和DOM对象的区别

1. 用原生js获取到的元素元素就是DOM对象
2. jquery获取到的元素就是jquery元素

• ​jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组的形式存储）

      // 1.DOM对象：用原生js获取过来的对象就是dom对象那个
      var myDiv = document.querySelector("div");
      console.dir(myDiv);
      //   2.jQuery获取
      $("div"); //$("div");是一个jquery对象
      console.dir($("div"));

区别

• 获取到的元素对象类型不同
• 各自的样式修改：不可互换

  //区别操作
   var myDiv = document.querySelector("div");
  //    dom对象操作
  myDiv.style.display = "none";
  //jQuery对象操作
  myDiv.hide(); //报错

6. DOM对象与jQuery对象转换

• 原生的一些属性和方法jquery没有给我们封装，想要使用这些属性和方法需要把jquery对象转换伪DOM对象才能使用
• DOM转jQuery可以直接使用$()包裹
• jQuery转DOM应该根据索引
  • 由于jq获取的对象以伪数组形式存储
  • index是索引号

//DOM转换为jQuery对象
var myvideo = document.querySelector("video");
$(myvideo); //直接用$转化

//jQuery对象转换为DOM对象
//直接使用$('')包裹抓换
$('div')[index]
$('div').get(index)

三、常用 API

查询手册：

jQuery API 1.11 中文文档 | jQuery API 在线手册jQuery API 1.11.3 中文手册最新版，在线地址：http://jquery.ttybz.comhttp://jquery.yanzhihui.com/index.html

1. jQuery选择器

     $(function () {
        console.log($(".nav"));
        console.log($("ul li"));
      });

2. 隐式迭代

遍历内部的DOM元素非过程就叫做隐式迭代

jQuery：给匹配到的所有元素进行循环遍历，执行对应的方法，而不用循环

• 可以理解为获取到所有元素可以直接使用样式

 

    
这里有几个字
    
这里有几个字
    
这里有几个字
    
这里有几个字

   

3. 筛选选择器

• 基础筛选选择器 

 

•  筛选重点：类似于获取节点操作方式（）注意括号参数可以获取到指定元素

• 选择器案例 - 下拉菜单显示

 

$(function () {
  // 鼠标经过：li的ul显示
  $(".nav>li").mousemove(function () {
    $(this).children("ul").show();
  });
  $(".nav>li").mouseout(function () {
    $(this).children("ul").hide();
  });
});

后期替换的操作方法： 切换与滑进、滑出切换效果：使用一个stop方法停止上一次动画效果

•  页面分析：鼠标移动上去触发显示下拉，鼠标移除隐藏 
• 代码分析：显示隐藏方法太生硬于是采用滑进滑出效果
  • 获取元素鼠标移动上去事件：设置显示： show（）方法
  • 获取元素鼠标移动上去事件：设置隐藏： hide（）方法

4. 排他思想：主要用兄弟元素获取+隐式迭代

  
    点击
    点击
    点击
    点击
    点击
    点击
    点击
  
  

 5. 以上总结案例:tab栏操作

• 页面效果：点击哪个标签就会显示哪个图片
• 代码解析:
  •  首先布置静态页面
  • 获取元素设置点击事件
    • 获取到当前获取到的元素的下标
    • 设置显示对应下标的图片
    • 并隐藏所有兄弟元素

6. 样式操作修改

简单样式修改直接使用样式方法

        // 1.简单样式修改
        console.log($("div").css("width")); //返回原始值
        $("div").css("width", "300px"); //进行修改
        $("div").css(height, "300"); //报错  属性名必须添加引号
        $("div").css("width", 500); //无报错：如果后面的值 是数字可以不用引号也不用单位
        $("div").css({
          width: 400,
          height: 400,
          backgroundColor: "red",
        });

复杂样式修改：使用类型名操作：类似于DOM中的className（类名）

         // (1)添加类:addClass
         $("div").addClass("con");
        // (2)添删除类:removeClass
        $("div").removeClass("con");
        // (3)切换类:toggleClass
        $("div").toggleClass("con");

      var div = document.querySelector("div");
      div.onclick = function () {
        // 特点：calssName会直接修改原来的类名：
        // 如果要保留：赋值的内容就是在原先的类名基础上添加类名
        this.className = "one change";
      };