html引入jquery;html引入jquery用不了 收藏 0

JavaScript学习笔记（三十一）—jQuery（上）

jQuery

• jQuery 是一个前端库，也是一个方法库
• 他里面封装着一些列的方法供我们使用
• 我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
• jQuery 之所以好用，很多人愿意使用，是因为它的几个优点太强大了

1. 优质的选择器和筛选器
2. 好用的隐式迭代
3. 强大的链式编程

• 因为这些东西的出现，很多时候我们要做的事情被 “一行代码解决”
• 接下来我们就来认识一下 jQuery

jQuery 的使用

• jQuery官网
• 官网是全英文的
• 也没啥可看的，不过没事的时候可以看看了解一下
• jQuery方法大全中文网
• 这个网站可以多看看
• 里面是 jQuery 的方法大全，而且是中文的
• 我们要使用 jQuery 首先要下载一个
• 可以去官网下载，也可以直接百度搜索下载，都可以
• 然后就是在页面里面引入 jQuery.js 就行了

• 然后就可以开始使用了
• jQuery 向全局暴露的接口就是 jQuery 或者 $ 都行

选择器和筛选器

• 选择器和筛选器就是用来帮我们获取 DOM 元素的

选择器

• jQuery 有着相当强大的选择器

• 上面两个都可以按照 id 来获取元素

• 上面就是按照类名来选择元素，可以获取到一组元素

• 上面就是按照标签名来获取元素，可以获取到一组元素

• 上面就是按照选择器来获取元素，可以获取到一组元素

特殊选择器

• 直接找到第一个

• 直接找到最后一个

• 直接找到第几个

• 找到所有奇数个

• 找到所有偶数

筛选器

• jQuery 的筛选器就是在选择器选择到一组元素以后
• 对元素进行筛选，也可以对准确的某一个元素进行判断和获取

1. 找到所有元素中的第一个$(\’li\’).first()
2. 找到所有元素中的最后一个$(\’li\’).last()
3. 找到某一个元素的下一个兄弟元素$(\’li:eq(3)\’).next()
4. 找到某一个元素的上一个兄弟元素$(\’li:eq(3)\’).prev()
5. 找到某一个元素的后面的所有兄弟元素$(\’li:eq(3)\’).nextAll()
6. 找到某一个元素的前面的所有兄弟元素$(\’li:eq(3)\’).prevAll()
7. 找到某一个元素的父元素$(\’li:eq(3)\’).parent()
8. 找到某一个元素的所有结构父级，一直到 html$(\’li:eq(3)\’).parents()
9. 找到一组元素中的某一个

属性操作

• 给一个元素添加某个属性

• prop 这个方法只能添加元素自己本身就有的属性
• 如果是添加的自定义属性，不会显示在标签上，但是可以使用
• 给一个元素添加某个自定义属性

• 移除元素的某一个属性

• 操作元素的类名

• 操作元素的内容

操作样式

• jQuery 操作元素的样式就是一个方法 css

关于JQuery引用及基本用法

在JQuery文件中下载，并将其引入html文件。在使用jQuery之前，我们需要到jQuery的官方网站：“https://jquery.com/download/”

把下载好的文件放到工程根目录下，然后在这个根目录下创建index.html文件。最后，将下载的JQuery文件引入index.html文件，其代码如下：

通过引入script标签，JQuery被引入到subject的subject中，subject是：

接下来，我们将研究JQuery的基本语法，并对其进行一些介绍。

示例1:$(\”div\”).hide()；此行表示隐藏div元素；

例子2:$(\”.box1\”).hide()；这行代码意味着class属性隐藏在box1的元素中；

示例3:$(\”#wrap\”).hide()；这行代码表示隐藏元素id的值为wrap；

示例4:$(\”hide.box1\”).hide()；这一行代码意味着，隐藏带有box1的cycle属性的hv元素；

从上面的例子中可以看出，JQuery语法非常简单，只需要一个美元符号$，后面跟着一个html的元素选择符(与我们之前学到的css选择符高度一致)，然后在后面加上JQuery的方法，例如hide(show等等)。

无论显示或隐藏元素时，都需要一个事件来触发该动作，我们常用的触发方式是鼠标点击，比如你用鼠标点击一个按钮，然后页面上就会弹出一个提示框，通过点击来触发效果，我们称之为“事件”。点击JQuery中事件的书写方式为：$(\”div\”).click(function(){…})，此代码意味着在div标签被点击之后触发事件，具体事件内容以函数形式写入。除单击事件外，JQuery还可以通过鼠标移动事件、双击事件、元素获取焦点事件等方式进行学习，后面我们将一一介绍，并查看JQuery如何使用。

在以上代码中，我们定义了一个button元素，一个div元素，然后点击按钮button，这个div元素就会被隐藏起来，各位同学可以尝试一下。在代码的最后一部分，包含了一段script标签，这段是JavaScript代码，所有的JavaScript代码都将被放置在script标签中以执行。

接下来是代码的第一句话：$(document).ready(function){…}，这是JQuery的固定写法，意思是页面加载后立即执行，执行代码被写入function函数的方法中(即{}内)。我们已经看到了这一方法。

$(\”#btn1\”).click(函数){

$(\”.box1\”).hide()；

})

这个代码就是我们前面提到的click事件，当单击id值为btn1的按钮时，会引发一个click元素的隐藏事件，click元素的名字叫做box1。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com