初识JQuery

最新推荐文章于 2021-05-18 10:37:05 发布

Super_Robot

最新推荐文章于 2021-05-18 10:37:05 发布

阅读量206

点赞数

分类专栏： jQuery 文章标签： jQuery介绍 jQuery环境搭建和使用 jQuery语法 jQuery选择器

本文链接：https://blog.csdn.net/Super_Robot/article/details/94122646

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初识jQuery

jQuery是JS的一个库！封装好的一个库！它就是类似Java中的一个jar包。

jQuery是最具代表性的一个库，它是划时代的产品。

一、jQuery介绍

核心理念：write less，do more(写的更少，做的更多)。

只要JS能做的，它都能做，大大简化了开发代码。

强大的选择器

它支持CSS3的所有选择器，还单独定制了一套高级选择器。
出色的DOM封装

简化且封装了大量的DOM操作。
可靠地时间处理机制

jQ把所有事件都封装了一个个的单独函数。
浏览器的兼容性好

jQ封装过程中处理了兼容性问题。jQ2.0以前的版本兼容IE6 7 8
隐式迭代

很多选择器在使用时无感知的进行了一系列的迭代(遍历)处理。
丰富的插件支持

jQ插件非常丰富，因为jQ大大简化了开发，所以很多开发人员也乐意使用jQ去开发一些JS插件。
对AJAX做了大量封装

一种异步无刷新的请求技术！

如果要支持老版本浏览器，需要使用jQuery1.12

二、jQuery的环境搭建和使用

2.1环境搭建

下载jQ（可以从jQ官网、jQ插件库网、GitHub）

版本选择：1.12.4或者1.8.3 它们兼容IE 6/7/8

每个版本都会有两种文件选择：jQuery的版本：

**压缩版：**体积小，代码经过混淆，使用于正式开发网站

**未压缩版：**体积大，代码结构清晰，是用于开发网站
导包(你想使用jQ代码，就需要先引入jQ，必须在你的代码前<自上而下加载代码>)

使用CDN调用jQuery

https://code.jquery.com/jquery-3.0.0.min.js

<script src="jq地址" type="text/javascript" charset="utf-8"></script>

使用本地文件调用jQuery

在浏览器控制台输入

确认jQuery版本号:$.fn.jquery或$().jquery

$(document).ready

事件，在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容(例如图片)加载之前，比传统的onload事件执行更考前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery</title>
		<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
		<script src="js/script.js" type="text/javascript"></script>
	</head>
	<body>
		<p>测试jQuery</p>
        <script type="text/javascript">
            // 页面加载函数
            $(function(){
                alert("Hello jQuery！");
            });
        </script>		
	</body>
</html>

$(document).ready(function(){
	console.log($("p"));
})

第二种方法把script标签放在body结束标签上面

<body>
    <p>测试jQuery</p>
	<script src="js/script.js" type="text/javascript"></script>
	<script type="text/javascript">
        // 页面加载函数
        $(function(){
            alert("Hello jQuery！");
        });
	</script>
</body>

jQuery.noConflict

某些框架也是用$符号作为简写(就像jQuery)，如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行

第一种方法

/*输入这个API $就不能使用了*/
jQuery.noConflict();
jQuery(document).ready(function(){
	console.log(jQuery("p"));
})

第二种方法

var jQ = jQuery.noConflict();
jQ(document).ready(function(){
	console.log(jQ("p"));
})

第三种方法

这种方法可以在方法里使用$（推荐）

jQuery.noConflict();
jQuery(document).ready(function($){
	console.log($("p"));
})

2.2 原生JS的页面加载函数和jQ的页面加载函数的区别

在这里插入图片描述

2.3 jQ的语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()
$(“p”).hide()-隐藏所有段落
jQuery 使用的语法是XPath与CSS选择器语法的结合

$(选择器).action();
jQuery().action();
工厂函数的作用：用于将DOM对象或者一系列的jQ支持的语法转换为jQ对象。
$：函数名 等价于jQuery
工厂函数参数：选择器   用于选中具体要进行操作的DOM对象
action：jQ的方法或者属性等...

// $(document)  它可以将DOM对象转换为jQ对象
// read();  jQ的页面加载方法/函数
$(document).ready(function(){
    jq代码；
});
简写：
$(function(){
   jq代码；
});

2.4 jQ的基本页面操作函数

css() 等价于JS的xxx.style.backgroundColor=xxx;

// 给div设置背景颜色为绿色
// $("#test").css("background-color","green");
// 可以同时设置多个，以分号隔开属性和值，逗号结尾，最后一个不写逗号
$("#test").css({
    "background-color":"green",
    "border":"5px solid yellow"
});

addClass() 等价于xxx.className = "xx";

$("#test").addClass("test");

show() 展示等价于xxxx.style.display = block/inline/inline-block;
hide() 隐藏等价于xx.style.display = "none";

括号里可以写时间，单位毫秒，用于延迟显示或隐藏

// 绑定事件
$("#hide").click(function(){
    // $("#test").hide();
    // $("#test").hide("2000");
    // $("#test").fadeOut("2000");
    $("#test").slideUp("5000");
});
$("#show").click(function(){
    // $("#test").show();
    //	$("#test").fadeIn("3000");
    $("#test").slideDown("5000");
});

2.5 jQ的链式操作

对一个对象进行多重操作，并将操作结果返回给该对象。

类似于Java的xxx().xxx().xxx;

2.6 jQ和DOM对象的转换

jQ的函数和DOM的函数属性等都是独立的，不可通用，所以有些时候我们需要进行转换，才能使用对应的一些函数。(如reset或忘记了一些函数但记得另一个的函数使用)

// DOM -> jQ
$(DOM对象)
$(document).ready();

var divEle = document.getElementById("test");
$(divEle)

// jQ -> DOM  你可以把一个jQ对象理解为一个数组  $("tr")
$("tr").get(索引);
$("tr")[索引];
$("form")[0].reset();

三、jQuery选择器

通过jQuery获取到的对象与通过document.getElement…获取到的对象是不同的

3.1 基本选择器

同CSS选择器

//  1.点击dt的时候，利用标签选择器将两个<dd>的内容显示
$("dt").click(function(){
    // jQ有隐式迭代
    $("dd").show();
});

// 2.利用标签选择器，将<h1>元素的字体颜色设置为蓝色
$("h1").css("color","blue");

//  3.利用类选择器将类名为price的元素背景设置为#efefef,内边距统一为5px
$(".price").css({
    "background":"#efefef",
    "padding":"5px"
});

// 4.利用id选择器将id名为author的字体颜色设置为#083499
$("#author").css("color","#083499");

// 5.利用并集选择器 将类名为intro和标签<dt>和<dd>的字体颜色设置为#ff0000
$(".intro,dd,dt").css("color","#ff0000");

// 6.使用全局选择器将所有字体粗细设置为加粗
$("*").css("font-weight","bold");

3.2 层次选择器

// $(".textRight p").css("color","red");
			 
// $(".textRight>p").css("color","red");

// $("h1+p").css("text-decoration","underline");
$("h1~p").css("text-decoration","underline");

3.3 属性选择器

// $("#news a[class]").css("background","#c9cbcb");
			
// $("#news a[class=hot]").css("background","#c9cbcb");
// $("#news a[class!=hot]").css("background","#c9cbcb");
// $("#news a[href^=www]").css("background","#c9cbcb");
// $("#news a[href$=html]").css("background","#c9cbcb");
$("#news a[href*=k2]").css("background","#c9cbcb");

3.4 过滤选择器

以冒号开头，通常用来对之前的选集进行过滤

常用的过滤选择器包括：

在这里插入图片描述

基本过滤选择器：

//  1.使用过滤选择器给类名为contain下的<h2>设置背景颜色为#2a65ba和字体颜色为#ffffff
$(".contain :header").css({
    "background":"#2a65ba",
    "color":"#fff"
});

// 2.使用过滤选择器给类名为contain下的最后一个<li>的边框设置为none；
$(".contain li:last").css("border-bottom","none");

// 3.使用过滤选择器给类名为contain下的第一个<li>设置字体大小为16px 字体颜色为#e90202
/*$(".contain li:first").css({
				"font-size":"16px",
				"color":"#e90202"
			});*/

// 4.使用过滤选择器给类名为contain下的偶数行<li>背景颜色设置为#f0f0f0
// $(".contain li:even").css("background","#f0f0f0");

// 5.使用过滤选择器给类名为contain下的奇数行<li>背景颜色设置为#cccccc
// $(".contain li:odd").css("background","#cccccc");

// 6.使用过滤选择器给类名为contain下的前两个<li>的字体颜色设置为#708b02
// $(".contain li:lt(2)").css("color","#708b02");

// 7.使用过滤选择器给类名为contain下的后两个<li>的字体颜色设置为#b66302
// $(".contain li:gt(3)").css("color","#708b02");

// 8.使用过滤选择器给类名为contain下的第三个<li>的背景颜色设置为#02acaa
// $(".contain li:eq(2)").css("color","#02acaa");

$(".contain li:not(li:eq(2))").css("color","#02acaa");

可见性过滤选择器：

$("#show").click(function(){
				
    // 将所有隐藏的p都显示出来
    $("p:hidden").show();

});

$("#hide").click(function(){

    $("p:visible").hide();

});

选择器可以以多种方式组合：

$(“#test.title[href]:visible”)

选择ID为test且具有title样式且带有href属性且能够看见的元素

组合方式基本与CSS一致

jQuery VS 原生javascript

jQuery是对javascript的扩展
提供了更方便快捷的语法，更多的方法
The Write Less，Do More，JavaScript Library
提供了统一的浏览器兼容性

Super_Robot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识JQuery

初识jQueryjQuery是JS的一个库！封装好的一个库！它就是类似Java中的一个jar包。jQuery是最具代表性的一个库，它是划时代的产品。一、jQuery介绍核心理念：write less，do more(写的更少，做的更多)。只要JS能做的，它都能做，大大简化了开发代码。强大的选择器它支持CSS3的所有选择器，还单独定制了一套高级选择器。出色的DOM封装简化且...
复制链接

扫一扫

专栏目录