初识jqeury

1. 什么是 jQuery

　　jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。

　　js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。

2. jQuery 的两大特点

  • 链式编程：比如.show()和.html()可以连写成.show().html()。
  • 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

3. jQuery 版本说明

　　jQuery 有三个大版本：

  • 1.x版本：最新版为 v1.11.3。

  • 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。

  • 3.x版本。

4. jQuery 使用

　　

5.jQuery 的入口函数和 $ 符号

5.1 入口函数（重要）：

　　js原生入口: 

        //原生 js 的入口函数。页面上所有内容加载完毕，才执行。
        //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。
       window.onload = function () {
           alert(1);
       }

　　jQuery的入口函数，有以下几种写法：

　　写法一：文档加载完毕，图片不加载的时候，就可以执行这个函数。

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

　　写法二：文档加载完毕，图片不加载的时候，就可以执行这个函数。（写法一的简洁版）

$(function () {
           alert(1);
       });

　　写法三：文档加载完毕，图片也加载完毕的时候，在执行这个函数。

$(window).ready(function () {
           alert(1);
       })

　　

5.2 jQuery入口函数与js入口函数的区别：　

　　区别一：书写个数不同：

  • Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。

  • jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

　　区别二：执行时机不同：

  • Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

  • jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

　　

5.3 jQuery的$符号

　　jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。$ 代表的就是 jQuery

　　jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候： 

<script src="jquery-3.3.1.js"></script>
<script>
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

　　

 

6. js中的DOM对象 和 jQuery对象比较

 

6.1 二者的区别

jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

　　通过 jQuery 获取的元素是一个jq对象数组，其中包含着原生JS中的DOM对象。举例：

　　针对下面这样一个div结构：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

　　通过原生 js 获取这些元素节点的方式是：

var myBox = document.getElementById("app");           //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

　　通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

//获取的是数组，里面包含着原生 JS 中的DOM对象。
console.log($('#app'));
console.log($('.box'));<br>console.log($('div'));

　　

6.2 二者的互相转换

　　DOM 对象 转为 jQuery对象：

$(js对象);

　　jQuery对象 转为 DOM 对象：

jquery对象[index];      //方式1（推荐）
jquery对象.get(index);  //方式2

　　jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

7.jquery 标签查找

7.1 基本选择器

var jqBox1 = $('#app'); //id选择器
var jqBox2 = $('.box'); //class选择器
var jqBox3 = $('div'); //tag标签选择器

 

<body>　　
    <div></div>
    <div id="app"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
</body>

$(function () { //jquery函数入口
        //1.通过id class 和标签名获取jquery对象
        var jqBox1 = $('#app'); //id选择器
        var jqBox2 = $('.box'); //class选择器
        var jqBox3 = $('div'); //tag标签选择器

        //2.操作标签选择器
        jqBox3.css('width', '100');
        jqBox3.css('height','100');
        jqBox3.css('background-color','red');
        jqBox3.css('margin-top',10);

        //3.操作类选择器
        jqBox2.css('background','green');
        jqBox2.text('这是类选择器')

        //4.操作ID选择器
        jqBox1.css('background','yellow');
    })

　　

7.2 层级选择器

posted @ 2019-10-29 11:26  王刘俊  阅读(190)  评论(0)    收藏  举报