jQuery 介绍

本质：由第三方厂商开发的JavaScript库，同理还有vue.js,Angular，React都是在JavaScript上进行的二次开发，便于开发人员。
下载地址：官网下载地址，截止到写文章为止是3.4.1版本。
下载介绍：Download the compressed, production jQuery 3.4.1 下载这个文件可以得到“jquery-3.4.1.min.js”，这是压缩版常用于生产环境，里面的js代码不具有可读性，有点是体积小，生产环境中加载速度快。Download the uncompressed, development jQuery 3.4.1 下载这个文件可以得到“jquery-3.4.1.js”，这个是未压缩的开发版本，里面的代码具有可读性，常用于开发环境，这两份js文件实现的效果是一样的。
在HTML或者jsp的引入方式：
找一个文件夹放js文件，在你需要的页面引入即可

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

选择器介绍

参考用例，可以用这个html来练手

<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实验室</title><style>
.myclass {font-style: italic;color: darkblue;
}
/* 高亮css类 */
.highlight {color: red;font-size: 30px;background: lightblue;
}
</style></head>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<body><div class="section"><h2>jQuery选择器实验室</h2><input style="height: 24px" id="txtSelector" /><button id="btnSelect" style="height: 30px">选择</button><hr /><div><p id="welcome">欢迎来到选择器实验室</p><ul><li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <astyle="color: darkgreen" href="http://www.so.com">360</a></span></li><li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <astyle="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a></span></li><li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span><a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a></span></li></ul><span class="myclass ">我是拥有myclass类的span标签</span><p class="myclass">我是拥有myclass的p标签</p><form id="info" action="#" method="get"><div>用户名：<input type="text" name="uname" value="admin" /> 密码：<inputtype="password" name="upsd" value="123456" /></div><div>婚姻状况： <select id="marital_status"><option value="1">未婚</option><option value="2">已婚</option><option value="3">离异</option><option value="4">丧偶</option></select></div><div class="left clear-left"><input type="submit" value="提交" /> <input type="reset" value="重置" /></div></form></div></div>
</body>
<script type="text/javascript">document.getElementById("btnSelect").onclick = function() {var value = document.getElementById("txtSelector").value;<!--移除所有叫这个名的样式 -->$("*").removeClass("highlight");<!-- 给选中的元素添加这个样式-->$(value).addClass("highlight");}
</script>
</html>

基本选择器

需要说明的是：$("#div1") 等价于jQuery("#div1")
$("#div1") 选中id叫做div1的标签
$(“p”)选中所有的p段落标签
$(“.class1”)选中所有class叫做class1的标签
$(“.class1,#div1”)选中所有class叫做class1的标签和id叫做div1的标签

层叠选择器

介绍：层叠选择器根据元素的位置关系获取元素的选择器表达式
语法如下：
代码参考如下

属性选择器

语法如下
参考如下

位置选择器

位置选择器是指通过位置获取指定的元素

表单选择器

表单选择器是获取表单元素的简化形式，例如：获取所有文本框

操作元素的属性

attr()和 removeAttr()

设置元素的样式

css()

设置元素的内容

jQuery事件处理

常用的事件如下：

$.ajax()

该方法用来ajax请求，前端和后台请求交互数据时使用
在学习如何使用之前，下面有关于AJAX的介绍

AJAX技术介绍

使用流程

创建请求，发送请求，接收响应

处理AJAX的同步请求时的注意事项

jQuery新手入门相关推荐

课程上线 -“新手入门 : Windows Phone 8.1 开发”
经过近1个月的准备和录制,"新手入门 : Windows Phone 8.1 开发"系列课程已经在Microsoft 虚拟学院上线,链接地址为:http://www.microso ...
新手入门指导：Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
《挑战30天C++入门极限》新手入门：C/C++中枚举类型(enum)
新手入门:C/C++中枚举类型(enum) 如果一个变量你需要几种可能存在的值,那么就可以被定义成为枚举类型.之所以叫枚举就是说将变量或者叫对象可能存在的情况也可以说是可能的值一一例举出来. ...
LINUX新手入门-1.装系统
LINUX新手入门-1.装系统首先我们用虚拟机模拟装linux系统,然后下一步下一步,然后完成后,编辑一些设置,把镜像放上面就可以了选第一项,安装系统,查看镜像是否能运行,直接跳过,选择语言和 ...
人工智能新手入门学习路线！附学习资源合集
有段时间没跟大家分享编程资源福利了!今天为大家整理了人工智能新手入门学习路线,同时附700分钟的学习资源合集,相信这套福利可以帮你顺利入行AI!文末领取全部资料. 一.AI基础好课学习资料整理(约31 ...
《jQuery Mobile入门经典》—— 第 1 章　了解jQuery Mobile
本节书摘来异步社区<jQuery Mobile入门经典>一书中的第1章,作者:[美]Phil Dutson,更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 1 ...
GBin1分享：jQuery新手技巧之“避免过多使用$('.someclass')”
为什么80%的码农都做不了架构师?>>> 日期:2011/10/08 原文:net.tusuplus.com 翻译:GBin1.com 作为nettus ...
《jQuery Mobile入门经典》—— 2.7　练习
本节书摘来异步社区<jQuery Mobile入门经典>一书中的第2章,第2.7节,作者:[美]Phil Dutson,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
【转】Jquery -Ajax 入门练习 Jquery.Ajax 调用后台函数，获取DataTable Json,Asp.net
直接上图=============最后拷贝源码(图片清楚) ====================================================================== ...

jQuery新手入门

jQuery 介绍

选择器介绍

基本选择器

层叠选择器

属性选择器

位置选择器

表单选择器

操作元素的属性

attr()和 removeAttr()

设置元素的样式

css()

设置元素的内容

jQuery事件处理

$.ajax()

AJAX技术介绍

使用流程

创建请求，发送请求，接收响应

处理AJAX的同步请求时的注意事项

jQuery新手入门相关推荐

最新文章

热门文章