jQuery入门之选择器的使用

一个没学懂Java的YT

已于 2022-03-17 23:02:47 修改

阅读量100

点赞数

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

于 2022-03-17 11:33:18 首次发布

本文链接：https://blog.csdn.net/javajsjsh/article/details/123546188

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本概念，包括它的优势（如轻量级、跨浏览器兼容、链式编程等）、适用场景（如中大型网站开发和前端框架基础）以及如何使用。通过实例展示了jQuery的入口函数和选择器的使用，帮助读者快速上手jQuery。

摘要由CSDN通过智能技术生成

一. 3W1H
1.1 what是什么？
1.2为什么学习
(1) 为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

(2)jQuery的优势：
轻量级。核心文件才几十kb，不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
免费、开源

1.3Where?哪些情况下用？
(1)中大型网站开发
(2)是一些前端框架的基础，比如EasyUI，Bootstrap

1.4How怎么用
使用jQuery步骤
1.下载jQuery库
开发版本：jquery-3.3.1.js
生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用

二. jQuery入口函数
2种写法

三.jQuery选择器
(1) jQuery中的选择器就是一个标记，为了快速获取指定的标签
(2) jQuery中常见选择器： ID选择器 class选择器 element选择器
子代选择器后代选择器相邻兄弟选择器分组选择器...

四.jQuery中的一些选择器的使用

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

<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
// 加载函数
// 1.window.onload = function(){} 1次
// 2.window.addEventLinstener('load',function(){}); 多次

window.onload = function() {
// 获取按钮
var btn = document.getElementById('btn1');
// 设置按钮的事件
btn.onclick = function() {
alert(123)
}
};
</script>


<script type="text/javascript">
// 加载函数
// 1.标准写法 $(document).ready(function(){});
// 2.简写写法 $(function(){})

jQuery(function() {
// 获取按钮设置点击事件弹窗
// 这种编写代码的方式称为"链式写法"
$("#btn2").click(function() {
alert(123)
});
});
</script>


<script type="text/javascript">
// 1.打开jQuery库查看后有一个基本架构
/*
(function(){

}())
上述这种结构称为自执行函数结构，作用就是自己定义调用自己自动执行
*/

// 函数
function add() {
alert(123)
}
// 手动调用
// add();

// 自执行函数的定义
// 闭合函数
(function() {
// alert('自执行函数');

}())

// $ 和$()的作用
// $这个符号是在jQuery库中定义属于jQuery
// $有点类似原生态js的window对象
// 在jQuery中，$作为了window对象中的一个属性（对象属性，对象函数）
console.log(window);
// window.jQuery = window.$ = jQuery;
// $等价于jQuery

// Person.add(); new Person().add();
// $ 有点类似Java的类 each isFunction
// $() 相当于类的构造方法

console.log($.type($));
// 判断$的类型
console.log(Object.prototype.toString.call($));

// $() 括号中可以根据需求传入指定的参数
// 根据参数不同，意思不同
// 1.参数为匿名函数时，意思：加载函数 $(function(){});
// 2.参数为字符串时，有两层意思
// 2.1 获取页面元素（选择器） $("#id") $(".class")
// 2.2 创建标签 $("<a></a>");
// 3.参数为DOM对象（js对象）意思：转换
// 明天 js对象《---》jQuery对象
var b1 = document.getElementById('btn1');
var $b1 = $("#btn1");
// console.log(b1 == $b1); //false
</script>
</head>
<body>
<h3>jQuery与js的使用</h3>
<hr>
<button id="btn1" type="button">点击后弹窗[原生态javascript]</button>
<button id="btn2" type="button">点击后弹窗[jQuery]</button>

</body>
</html>