JQuery - 基础总结

最新推荐文章于 2023-06-16 21:18:05 发布

LSYHhhhh

最新推荐文章于 2023-06-16 21:18:05 发布

阅读量211

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_33961117/article/details/83273544

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目录

一、认识jQuery

1、jQuery概念

2、jQuery的优势

二、jQuery的安装

1、版本区别

2、安装jQuery-3.3.1

1、推荐方式 - 官网下载的使用方法：JQuery官网

2、CDN下载的使用方法：CDN - jquery网址

3.查看是否可以正常使用

三、jQuery基本使用

1、JQuery对象

2、页面加载

3、jQuery语法

四、功能简单概括:JQ - API 功能查询

1、选择器

1) 元素选择器

2) 属性选择器

3) CSS选择器

4) JQ vs JS

2、各类操作 JQ vs JS

1) 文本操作

2) 样式操作

3) 类名操作

4) 事件操作

5) 动画操作

6) 文档操作

五、JQ对象与JS对象相互转化

一、认识jQuery

1、jQuery概念

jQuery是对原生JavaScript二次封装的工具函数集合

jQuery是一个简洁高效的且功能丰富的JavaScript工具库

2、jQuery的优势

完全开源的源代码

强大简洁的选择器

事件、样式、动画的良好支持

链式表达式

简化的Ajax操作

跨浏览器兼容

丰富的插件及对外的扩展接口

二、jQuery的安装

1、版本区别

开发(development)版本 - [未压缩]：jQuery-x.x.x.js

生产(production)版本 - [压缩]：jQuery-x.x.x.min.js

2、安装jQuery-3.3.1

1、推荐方式 - 官网下载的使用方法：JQuery官网
官网 - Download界面 - 找到相应的版本
粘贴，另存为到本地。
也可以右键另存为下载
导入方式
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // user code
</script>
2、CDN下载的使用方法：CDN - jquery网址
复制路径在线使用
使用方法
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    // user code
</script>
下载到本地的方法
3.查看是否可以正常使用
<script>
	console.log(jQuery);
</script>

三、jQuery基本使用

1、JQuery对象

jQuery 等同于 window.jQuery

$ 简写方式

jQuery.noConflict() 使用方法进行调用，返回值为jquery对象
当$与其他插件符号发生冲突，可以使用此方法，新增加变量名，进行调用。
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	console.log(jQuery);
	console.log($);
	console.log(window.jQuery);
	// $ === jQuery

	// 当使用jq时,jq符号$与其他框架或插件符号发生冲突,可以通过jQuery.noConflict()修改jq符号
	var __$ = jQuery.noConflict();
	console.log(__$);

</script>
2、页面加载

1- 当页面内容不存在长时间加载的内容，JS和JQ几乎同时完成加载，则显示顺序取决于书写的前后位置

2- 当页面中存在长时间加载的内容，JQ先于JS加载完成
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>页面加载</title>

	
	<script src="js/jquery-3.3.1.js"></script>

	<script type="text/javascript">
		
		// js页面加载完毕后（DOM树和资源）,触发的事件回调方法
		// window.onload=fn单事件绑定：
		// 只能绑定一个(逻辑下方的)回调函数，页面加载完毕后回调
		window.onload = function () {
			console.log("window load 1");
		}
		window.onload = function () {
			console.log("window load 2");  // 5
			var div = document.querySelector('.div');
			console.log(div);
		}
		

		// jq文档加载完毕（仅DOM树）
		//$(document).ready(fn)多事件绑定,简写$(fn)
		$(document).ready(function () {
			console.log('document load 1');  // 2
		})
		$(document).ready(function () {
			console.log('document load 2');  // 3
		})
		// 简写
		$(function () {
			console.log('document load 3');  // 4
		})

		console.log('normal load');  // 1

	</script>

</head>
<body>
	<div class="div"></div>
	
	<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
</html>
3、jQuery语法

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

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
注意：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

四、功能简单概括:JQ - API 功能查询

1、选择器

1) 元素选择器

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$("ul li:first") 选取每个 <ul> 的第一个 <li> 元素

$("div#intro .head") 选取id="intro" 的 <div> 元素中的所有 class="head" 的元素

2) 属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3) CSS选择器

$("p").css("background-color","red"); -- 把所有 p 元素的背景颜色更改为红色

4) JQ vs JS
//jq 变量中的$可省，存在目的防止与js语言存在重复冲突
var $div = $('body #d1');
console.log($div);

//js
var div = document.querySelector('.div2');
console.log(div);
2、各类操作 JQ vs JS

1) 文本操作
//JQ
var $div = $('body #d1');
$div.text("d1 d1 d1");
$div.html("<b>d1 d1 d1</b>");

//JS
var div = document.querySelector('.div2');
div.innerText = "d2 d2 d2";
div.innerHTML = "<b>d2 d2 d2</b>";
2) 样式操作
//jq
var $div = $('body #d1');
$div.css({
	width: "200px",
	"border-radius": "50%"
});

// jq的方法基本都具有返回值,所以支持(建议)链式操作
/*
$div = $div.css("height", function () {
	console.log("js>>>", this);  // js的this本身
	console.log("jq>>>", $(this));  // jq的this本身
	console.log(">>>", $(this).width());  // jq对象指向的盒子宽度
	return $(this).width() * 2;  // jq会默认添加单位
});
$div.css("background-color", "red");
*/
//链式操作,执行结果同上
$div.css("height", function () {
	console.log("js>>>", this);  // js的this本身
	console.log("jq>>>", $(this));  // jq的this本身
	console.log(">>>", $(this).width());  // jq对象指向的盒子宽度
	return $(this).width() * 2;  // jq会默认添加单位
}).css("background-color", "cyan");



//js
var div = document.querySelector('.div2');
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "orange";
div.style.borderRadius = "50%";
$ele.css({width: '200px', heigth: '200px'});
$ele.css('background-color', 'red')
$ele.css({width: '200px', heigth: '200px'}).css('border-radius', '50%');

3) 类名操作
//jq
//toggleClass --如果存在（不存在）就删除（添加）一个类。
$('.b1').click(function () {
	$div.toggleClass("active");
})


//js
var b2 = document.querySelector('.b2');
b2.onclick = function () {
	var c_name = div.className;
	if (c_name.match("active")) {
		div.className = c_name.replace(" active", "")
	} else {
		div.className += " active";
	}
}
 
4) 事件操作

$ele.on('click', function() {}); -- 点击事件
$div.on('click', function () {
	console.log("$div 被点击了");
})
5) 动画操作

$ele.slideUp(); -- 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
$ele.slideToggle(); -- 通过高度变化来切换所有匹配元素的可见性
$('.b1').on('click', function () {
	$div.slideToggle();
})
6) 文档操作
$ele.append("<b>Hello</b>"); -- 向每个匹配的元素内部追加内容。
// 创建标签
var $p = $("<p></p>");
// 样式操作
$p.addClass("p");
// 添加到页面
$div.append($p);

五、JQ对象与JS对象相互转化

js对象转换为jq对象：$ele = $(ele); ---- jq对象名 = $(js对象名)

jq对象转换为js对象：
ele = $ele.get(0); ---- js对象名= jq对象名.get(0);
ele = $ele[0]; ---- js对象名= jq对象名[0]
	var $div = $('div');
	// jq => js
	// innerText
	console.log($div);
	//var div = $div.get(0);
        var div = $div[0];
	div.innerText = "呵呵";

	// js => jq
	// addClass
	var $n_div = $(div);
	$n_div.addClass("div");

LSYHhhhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery - 基础总结

目录一、认识jQuery1、jQuery概念2、jQuery的优势二、jQuery的安装1、版本区别2、安装jQuery-3.3.11、推荐方式 - 官网下载的使用方法：JQuery官网2、CDN下载的使用方法：CDN - jquery网址3.查看是否可以正常使用三、jQuery基本使用1、JQuery对象2、页面加载3、jQuery语法...
复制链接

扫一扫