前端开发-jQuery基本语法

一、什么是jQuery

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示： 除此之外，Jquery还提供了大量的插件。

二、为什么使用jQuery

写起来简单，省事，开发效率高，兼容性好

三、jQuery介绍

    - 版本      - 1.x         兼容IE8。。。      - 3.x         最新   - .min.xx      压缩的：生产环境用   -  没有压缩的（没有.min.xx）：开发用

四、如何使用jQuery导入：

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

或者：

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

五、jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

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

实例：
$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$("p .test").hide() - 隐藏所有 class="test" 的段落$("#test").hide() - 隐藏所有 id="test" 的元素

六、jQuery选择器

元素选择器

　　jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

实例：

用户点击按钮后，所有 <p> 元素都隐藏：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function () {$("button").click(function () {$("p").hide();});});</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<button>点我</button></body>
</html>

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：$("#test")

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function () {$("button").click(function () {$("#test").hide();});});</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另一个段落</p>
<button>点我</button></body>
</html>

　.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：$(".test")

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function () {$("button").click(function () {$(".test").hide();});});</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落</p>
<p>这是另一个段落</p>
<button>点我</button></body>
</html>

CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

实例

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

```
基本过滤选择器
```

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本过滤选择器</title>
</head>
<body><ul><li>哈哈哈哈，基本过滤选择器</li><li>洛洛</li><li>宝刀屠龙</li><li>降龙十八掌</li></ul></body>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {//获取第一个：first，获取最后一个：last//奇数$('li:odd').css('color','red');//偶数$('li:even').css('color','yellow');//选中索引值为1的元素$('li:eq(1)').css('font-size','100px');//大于索引值1$('li:gt(1)').css('font-size','50px');//小于索引值1$('li:lt(1)').css('font-size','12px');})
</script>
</html>

　　筛选选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box"><p class="p1"><span>我是第一个span标签</span><span>我是第二个span标签</span><span>我是第三个span标签</span></p><button>按钮</button></div><ul><li class="list">2</li><li>3</li><li>4</li><li>5</li></ul></body>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">//获取第n个元素，数值从0开始$('span').eq(1).css('color','#FF0000');//获取第一个元素：first：last  点语法：get方法和set方法console.log($('span').last());$('span').last().css('color','greenyellow');console.log($('span').parent('.p1'));$('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'});//.siblings()选择所有的兄弟元素$('.list').siblings('li').css('color','red');//.find()//查找所有的后代元素$('div').find('button').css('background','yellow')
</script>
</html>

练习题

答案：

转载于:https://www.cnblogs.com/mike-liu/p/9485252.html

前端开发-jQuery基本语法相关推荐

第四章前端开发——JQuery库
第四章前端开发学习--JQuery库一.jQuery基础二.使用选择器获取元素三.使用筛选器获取元素四.DOM操作五.属性和样式操作六.jQuery事件机制七.动画效果八.工具和其他 ...
jquery级试题_1+x证书web前端开发jquery专项练习测试题
javascript程序设计-题库 1.下面哪一种不属于Jquery的选择器? A. 基本选择器 B. 层次选择器 C. 表单选择器 D. 节点选择器答案: D 2.如果需要匹配包含文本的元素,用下 ...
商品结算页面html代码,前端开发jQuery购物车结算页面代码
/p> < 购物车结算 .shop-total, .all-total { height: 50px; line-height: 50px; font-weight: bold; colo ...
前端开发框架_2019年应该如何学习前端开发？
近两年来,前端开发工程师越来越火了,2019年已经到来了,很多准备入行前端开发工程师的小伙伴们,不知道准备得怎么样了呢? 有的朋友在想方设法的学习,争取在年后的金三银四能靠实力找到一份满意的工作!有的 ...
前端开发最基本的3个语言
做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果. 前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言. 网页布局基础:HTM ...
2019年应该如何学习前端开发？
近两年来,前端开发工程师越来越火了,2019年已经到来了,很多准备入行前端开发工程师的小伙伴们,不知道准备得怎么样了呢? 有的朋友在想方设法的学习,争取在年后的金三银四能靠实力找到一份满意的工作!有的 ...
Web前端开发必备：《Jquery实战》第3版介绍
目标读者本书适合想深入学习jQuery的Web开发人员.全栈工程师.架构师.jQuery是互联网上最流行的JavaScript框架.本书的目标是希望读者成为Web高级开发人员,无论起点如何.本书深入 ...
视频教程-jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定-jQuery
jQuery交互式前端开发(第一季):初体验/选择器/事件绑定知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老兵 ¥12. ...
【前端基础】20.JQuery基本语法
视频目录 1.jQuery概述 1.1 JavaScript库 1.2 jQuery的概念 2.jQuery的基本使用 2.1 jQuery的下载 2.2 jQuery的使用步骤 2.3 jQuer ...
Web前端开发HTML清华大学,清华大学出版社-图书详情-《Web前端开发——HTML5+CSS+JavaScript+ jQuery +Dreamweaver》...
前言 Web前端开发是网站开发方向重要的专业课程,随着市场对Web前端工程师的需求增加,国内很多本专科院校正在或准备开设该课程.本书是咸阳师范学院2016年教材建设资助项目. Web前端开发涵盖多门技 ...

前端开发-jQuery基本语法

#id 选择器

CSS 选择器

实例

前端开发-jQuery基本语法相关推荐

最新文章

热门文章