jQuery

jQuery是什么

jQuery是一款优秀的JavaScript库 ,从命名可以看出jQuery最主要的用途是用来做
查询(jQuery=js+Query) ，正如jQuery官方Logo副标题所说 (write less, do
more)使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax
变得更加简单

使用原生 js 查找DOM元素

window.onload = function (event) {var div1 = document.getElementsByTagName("div")[0];var div2 = document.getElementsByClassName("box1")[0];var div3 = document.getElementById("box2");
}

使用 jQuery 查找DOM元素

$(function () {var $div1 = $("div");var $div2 = $(".box1");var $div3 = $("#box2");
});

使用原生 js 设置背景颜色

window.onload = function (event) {div1.style.backgroundColor = "red";div2.style.backgroundColor = "blue";div3.style.backgroundColor = "yellow";
}

使用原生 jQuery 设置背景颜色

$(function () {$div1.css({backgroundColor: "red",});$div2.css({backgroundColor: "blue",width: "200px",height: "200px",});$div3.css({backgroundColor: "yellow",});
});

jQuery 版本选择问题

1.x: 兼容ie678,但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本: 1.12.4 (2016年5月20日).
2.x: 不兼容ie678,相对1.x文件较小，訪只做BUG维护，功能不再新增，最终版本: 2.2.4 (2016年5月20日)
3.x: 不兼容ie678，只支持最新的浏览器,很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本。

jQuery的使用

<script src="jquery-1.12.4.js"></script>
<script>// 1. 原生js的固定写法window.onload = function (event) {};
// 2. jQuery的固定写法
$(document).ready(function () {console.log("Hello World");
});
</script>

jQuery入口函数和原生js入口函数的区别

原生js和jQuery入口函数的加载模式不同
原生js会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕才会执行
原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的
jQuery中编写多个入口函数，后面的不会覆盖前面的

jQuery入口函数的四种写法

// 1. 第一种写法
$(document).ready(function () {console.log("hello 1");
});// 2. 第二种写法
jQuery(document).ready(function () {console.log("hello 1");
});// 3. 第三种写法(推荐)
$(function () {console.log("hello 1");
});// 4. 第四种写法
jQuery(function () {console.log("hello 1");
});

jQuery的冲突问题

<script src="jquery-1.12.4.js"></script>
<script src="test.js"></script>

test.js文件内容如下：

var $ = 100;

test.js中的 $ 符号覆盖了jquery-1.12.4中的 $ 符号

这时如果在使用 $ 符号，则会使用test.js中的 $

// 1. 释放 $ 的使用权
// 注意点：释放操作必须在编写其他代码之前编写
//    释放之后就不能再使用 $ ,改为使用 jQuery//  jQuery.noConflict();// 2. 自定义一个访问符号var nj = jQuery.noConflict();nj(function () {console.log("hello");
});

jQuery核心函数

// $(); 就代表调用jQuery的核心函数// 1. 接收一个函数
$(function () {console.log("hello 1");// 2. 接收一个字符串// 2.1 接收一个字符串选择器// 返回一个jQuery对象，对象中保存了我们找到的DOM元素var $box1 = $(".box1");var $box2 = $("#box2");console.log($box1);console.log($box2);// 2.2 接收一个字符串代码片段// 返回一个jQuery对象，对象中保存了创建的DOM元素var $p = $("<p>我是段落</p>");console.log($p);$box1.append($p);// 3. 接收一个DOM元素// 会被包装成一个jQuery对象返回给我们var span = document.getElementsByTagName("span")[0];console.log(span);var $span = $(span);console.log($span);
});

jQuery对象

$(function () {/** 1. 什么是jQuery对象* jQuery对象是一个类数组对象** 2. 什么试试类数组对象？* 有0到length-1的属性，并且有length属性*/var $div = $("div");console.log($div);var arr = [1, 3, 5];console.log(arr);
});

静态方法

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
/*第一个参数：遍历到的元素第二个参数：当前遍历到的索引注意点：原生的forEach方法只能遍历数组，不能遍历类数组对象*/
//   arr.forEach(function (value, index) {//     console.log(index, value);
//   });//   obj.forEach(function (value, index) {//     console.log(index, value);
//   });// 1. 利用jQuery的each静态方法遍历数组
/*第一个参数：当前遍历到的索引第二个参数：遍历到的元素注意点：jQuery的each方法是可以遍历类数组对象的*/
//   $.each(arr, function (index, value) {//     console.log(index, value);
//   });
$.each(obj, function (index, value) {console.log(index, value);
});

静态方法map方法

var arr = [1, 3, 5, 7, 9];
var obj = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 1. 利用原生js的map方法遍历
/*第一个参数：当前遍历到的元素第二个参数：当前遍历到的索引第三个参数：当前被遍历的数组注意点：和原生的forEach一样，不能遍历的类数组对象*/
//   arr.map(function (value, index, array) {//     console.log(index, value, array);
//   });//   obj.map(function (value, index, array) {//     console.log(index, value, array);
//   });/*第一个参数：要遍历的数组第二参数：每遍历一个元素之后执行的回调函数回调函数的参数：第一个参数：当前遍历到的元素第二个参数：遍历到的索引注意点：和jQuery中的each静态方法一样，map静态方法也可以遍历类数组对象*/
//   $.map(arr, function (value, index) {//     console.log(index, value);
//   });var res1 = $.map(obj, function (value, index) {console.log(index, value);return value + index;
});var res2 = $.each(obj, function (index, value) {console.log(index, value);return value + index;
});/*jQuery中的each静态方法和map静态方法的区别：each静态方法默认的返回值就是，遍历谁就返回谁map静态方法默认的返回值是一个空数组each静态方法不支持在回调函数中对遍历的数组进行处理map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回*/
console.log(res1, res2);

jQuery中的其他静态方法

/*$.trim();作用：去除字符串两端的空格参数：需要去除空格的字符串返回值：去除空格之后的字符串*/
/*var str = "    lnj    ";var res = $.trim(str);console.log("---" + str + "---");console.log("---" + res + "---");*/
// 真数组
var arr = [1, 3, 5, 7, 9];
// 伪数组
var arrlike = { 0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5 };
// 对象
var obj = { name: "lbj", age: "33" };
// 函数
var fn = function () {};
// window对象
var w = window;/*$.isWindow();作用：判断传入的对象时候是window对象返回值：true/false*/
/*var res = $.isWindow(w);console.log(res);*//*$.isArray();作用：判断传入的对象时候是真数组返回值：true/false*//*var res = $.isArray(arr);console.log(res);*//*$.isFunction();作用：判断传入的对象时候是一个函数返回值：true/false注意点：jQuery框架本质上是一个函数*/
var res = $.isFunction(jQuery);
console.log(res);

静态方法的holdReady方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>12-静态方法的holdReady方法</title><script src="jquery-1.12.4.js"></script><script>// $.holdReady(true); 作用：暂停ready执行// 代码效果：使得点击按钮后，只执行一次$.holdReady(true);$(document).ready(function () {console.log("ready");});</script></head><body><button>恢复ready事件</button><script>var btn = document.getElementsByTagName("button")[0];btn.addEventListener("click", () => {$.holdReady(false);});</script></body>
</html>

jQuery内容选择器

// :empty 作用：找到既没有文本内容也没有子元素的指定元素
// var $div = $("div:empty");
// console.log($div);// :parent 作用：找到有文本内容或有子元素的指定元素
// var $div = $("div:parent");
// console.log($div);// :contains(text) 作用：找到包含指定文本内容的指定元素
// var $div = $("div:contains('我是div')");
// console.log($div);// :has(selector) 作用：找到包含指定子元素的指定元素
var $div = $("div:has('span')");
console.log($div);

jQuery初识 - jQuery是什么相关推荐

jQuery初识 - jQuery关于节点的相关方法
jQuery添加节点的相关方法内部插入 append(content|fn) appendTo(content) 会将元素添加到指定元素内部的最后 prepend(content ...
jQuery初识 - jQuery案例练习
jQuery事件委托什么是事件委托请别人帮忙做事情,然后将做完的结果反馈给我们在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,jQuery会遍历所有找到的元素,给 ...
jQuery初识 - jQuery中的方法
jQuery的attr方法 attr(name|pro|key,val|fn) 作用:获取或者设置属性节点的值可以传递一个参数,也可以传递两个参数如果传递一个参数,代表获取属性节点的值 ...
跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
5JS库-前端框架（库）-初识jQuery
前端框架(库) #初识jQuery jQuery由美国人John Resig于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装它的设计 ...
JavaScript交互式网页设计 • 【第6章初识jQuery】
全部章节 >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...
初识JQuery框架的基本使用
初识JQuery框架的基本使用本文内容大纲 //jquery不是语言是js的框架 (方便简化javaScript开发:选择器.Css.Html.js动画.浏览器兼容.丰富插件) How怎么用? 使 ...
初识--jQuery
初识–jQuery jQuery基础初识jQuery jQuery是什么? jQuery是一款优秀的JavaScript库,最主要的用途是用来做查询,还能让我们对HTML文档遍历和操作.事件处理.动 ...
初识jQuery(适合初学者哟.........)
您要知道!! jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库. 微软公司甚至把jQuery作为他们的官方库.对 ...

jQuery初识 - jQuery是什么

jQuery

jQuery是什么

jQuery 版本选择问题

jQuery的使用

jQuery入口函数和原生js入口函数的区别

jQuery入口函数的四种写法

jQuery的冲突问题

jQuery核心函数

jQuery对象

静态方法

静态方法map方法

jQuery中的其他静态方法

静态方法的holdReady方法

jQuery内容选择器

jQuery初识 - jQuery是什么相关推荐

最新文章

热门文章