jQuery 选择器事件

最新推荐文章于 2022-05-01 22:48:35 发布

LygTom

最新推荐文章于 2022-05-01 22:48:35 发布

阅读量411

点赞数

分类专栏：前端前端 js JavaScript javascript

本文链接：https://blog.csdn.net/LygTom/article/details/77169606

版权

前端同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

前端 js JavaScript

18 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

刚刚学完原生js，不知道大家有什么感受，我的感觉就是太烧脑了，太麻翻了。那么我们能不能找到一种很好的方法去代替这些繁琐、烧脑的步骤呢?答案无疑是肯定的，我们找到了一种非常简单并且使用的工具，那就是jQuery，说白了jQUery就是一个很大的仓库，它里面包含和封装了很多的方法供我们调用。下面我们就简单的给大家介绍一下。

首先我们去官网下载jquery 官网网址为：http://jquery.com/download/ 有两个版本，一个是压缩版（供我们使用），另一个是阅读版，我们可以具体阅读源码。
1.1基本概念
jQuery是一个js库，能够帮助我们轻松实现一些原本可能比较麻烦的功能
jQuery每个版本又有两个小版本，压缩版和未压缩版，压缩版文件比较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。
jQuery实际上就是一个js文件，加载到页面就可以使用了。
<script type="text/css" src="../jquery-3.2.1.min.js">
CDN（Content Distribute Network：内容分发网络）：也可以通过CDN来引用jQuery。
百度：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
使用cdn的好处
1.省事
2.速度更快
1.2语法：
$（选择器）.action（）
$定义了这是一个jQuery的代码
选择器：按照一定的规则选择DOM元素，类似于CSS选择器
Action：对选中元素执行的操作。
方案一：使用js
var paras = document.getElementsByTagName("p");
for(var i in paras){
paras[i].addEventListener("click",red);
}
function red(){
this.style.color = "red";
}

方案二：jQuery
$("p").click(red);
function red(){
this.style.color = "red";
}
$("p").click(red);
相当于：
所以说jQuery极大地减少了程序员的工作。

1.3.选择器:
元素选择器：根据标签名来获取元素
例：$(“p”):表示获取所有的段落
Id选择器：
$(#p1):表示选择id=“p1”的元素
3.class选择器
$(".top2").click(red);
4.后代选择器
$("div p").click(red);
表示选择div里的段落。
5.伪类选择器
$("p:first").click(red);
表示选择p标签的第一个元素，相当于css中的伪类选择器。
6.属性选择器
$("p[name]").click(red);
表示选中所有具有name属性的段落。
$("p[name='second']").click(red);
选中name属性所有等于second的段落。
$("tr:even").css("background-color","red")
表示选中所有奇数行的tr
1.4 事件
jQuery中注册时间的方法也是调用jQuery对象的方法
比如单击事件
$("#div1").click();
鼠标移入事件
$("#div1").mouseenter();
而且方法名也是js的事件名

之前我们所有的js代码是放在<body>之后的，如果放在<body>之前呢？
实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行此代码时，文档还没有加载完成，也就是说元素还不存在。
解决方法：
将代码放在
$(document).ready(function(){……}
中，也就是说在文档加载完成之后才会执行此代码。
$(document).ready(function(){
    $("#div1").mouseenter(function(){
        this.style.backgroundColor = "red";
    }).mouseleave(function(){
        this.style.backgroundColor = "blue"
    });
});