HTML学习16 JQuery 入口函数事件处理程序 jQuery基本选择器

最新推荐文章于 2021-11-24 22:15:25 发布

林⁣熙

最新推荐文章于 2021-11-24 22:15:25 发布

阅读量264

点赞数

分类专栏： jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/lx1315998513/article/details/106181873

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery：

简单易用，功能强大，对移动端来说，体积稍大。

回顾前面学到的js我们遇到的一些痛点

1.window.onload 事件有个事件覆盖的问题，我们只能写一个
2.代码容错性差
3.浏览器兼容性问题
4.书写很繁琐，代码量多
5.代码很乱，各个页面到处都是
6.动画效果，我们很难实现

jQuery解决问题

解决了我们上面遇到所有问题

jQuery的基本使用

jQuery需要掌握：1、选择器。2、api文档

jquery-1.11.1.js
jquery-1.11.1.min.js
min：它是压缩过的版本
区别：我们开发过程中，会用未压缩的版本，或者压缩的。
项目上线的时候，我们要用压缩过的版本。
版本问题：
1.1.xxx 版本 jQuery-1.11.1.js
2.2.xxx 版本不再支持IE6、7、8
3.1引包
1.要把我们的jQuery源文件拿到我们的项目里面来
2.在我们的页面中引用jQuery文件

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script>

</script>

问题：
$ is not defined
如果遇到这种问题，那肯定是没有引用我们的jQuery源文件。
用jQuery之前，先引入jQuery，然后，再去写我们的jQuery代码。

入口函数

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

事件处理程序

1.事件源
Js方式：document.getElementById(“id”)
jQuery方式：$(“#id”)
2.事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
区别：jQuery的事件不带on
3.事件处理程序
Js 书写方式:
document.getElementById(“id”).onclick = function(){
// 语句
}
jQuery 书写方式:
$(“#id”).click(function(){
// 语句
});

jQuery详细介绍

问题
a)Js命名归法：下划线、字母、$、数字
b)但是不能以数字作为开头

var $ = “我是$符号”;

jQUery的两个变量：$ 和 jQuery
jQuery占用了我们两个变量：$ 和 jQuery

js入口函数跟jQuery入口函数的区别：

1.Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行 （等待图片加载）
2.jQuery的入口函数 是在 html所有标签都加载之后，就回去执行。（不需要等待图片加载）

Js创建对象

三种方式：
1.var obj = {};
2.var obj1 = new Object();
3.var obj2 = Object.create();
1跟2的区别：
推荐使用第一个方式
第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。

jQuery基本选择器

 回顾CSS选择器
CSS选择器回顾
符号说明用法
#id Id选择器 #id{ color:red; }
.class 类选择器 .class{ //}
Element 标签选择器 P { //}

*			通配符选择器	配合其他选择器来使用
,			并集选择器		div,p{}
 空格		后代选择器		div span{} 选择div下面所有后代的span

jQuery基本选择器

基本选择器
符号说明用法
$(“#demo”) 选择id为demo的第一个元素 $(“#demo”).css(“background”,”red”)
$(“.liItem”) 选择所有类名（样式名）为liItem的元素 $(“.liItem”). css(“background”,”red”);
$(“div”) 选择所有标签名字为div的元素 $(“div”). css(“background”,”red”);
$(“”) 选择所有元素少用或配合其他选择器来使用 $(“”). css(“background”,”red”)
$(“.liItem,div”) 选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素 $(“.liItem,div”). css(“background”,”red”)

规律：$(selector).css(“background”,”red”);

jq重点有2个：第一：选择器，第二：api

jQuery是什么

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

工具，扭螺丝，徒手，有了工具

Javascipt跟jQuery的区别：
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

test.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

		<div id="id" class="id" style="background-color: aqua;">
			123
		</div>
		<div class="id">
			456
		</div>


		<form action="#" method="post">
			<input type="checkbox" value="1" />游戏
			<input type="checkbox" value="2" />睡觉
			<input type="checkbox" value="3" checked="checked" />听音乐
		</form>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 使用jquery 首先要引用包 */
			//$ is not defined $符号找不到，原因是没有成功加载jquery。
			//入口函数：两个是一样的
			$(document).ready(function() {});
			$(function() {});

			$(function() {
				//开始写jquery代码了。
				/* 1. 事件源:
					js方式: document.getElementById("id"); //根据id获取标签元素
				jq方式: $("#id"); */

				//jq的选择器，和css的选择器大同小异，jq的选择器要写在$()里面。
				//$("#id")		$(".id")     $("span")
				//选择器：选中某个元素
				$("input:checked");



				/* 2. 事件
				js方式: document.getElementById("id").onclick;
				jq方式: $("#id").click */
				$("#id").click(function() {
					console.log(123);
					$(this).hide();
				});




				var bgc = $("#id").css("background");
				console.log(bgc);

				//设置颜色值
				$("#id").css("background","red");
				
				$("#id").css({
					color:"red",
					background:"#889966",
					width:"100px",
					height:"100px"
				});
				
			});
		</script>
	</body>
</html>

林⁣熙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习16 JQuery 入口函数事件处理程序 jQuery基本选择器

jQuery：简单易用，功能强大，对移动端来说，体积稍大。回顾前面学到的js我们遇到的一些痛点 1.window.onload 事件有个事件覆盖的问题，我们只能写一个 2.代码容错性差 3.浏览器兼容性问题 4.书写很繁琐，代码量多 5.代码很乱，各个页面到处都是 6.动画效果，我们很难实现jQuery解决问题解决了我们上面遇到所有问题jQuery的基本使用jQuery需要掌握：1、选择器。2、api文档 jquery-1.11.1.js jq
复制链接

扫一扫