2_jQuery
一. jQuery介绍
1.1 什么是jQuery
- jQuery, 顾名思义, 也就是JavaScript和查询(Query), 它就是辅助JavaScript开发的js类库
1.2 jQuery核心思想
- 它的核心思想write less, do more(写的更少, 做的更多), 所以它实现了很多浏览器的兼容问题
1.3 jQuery流行程度
- jQuery现在已经成为最流行的JavaScript库, 在世界前10000个访问最多的网站中, 有超过55%在使用jQuery
1.4 jQuery优点
- jQuery是免费, 开源的, jQuery的语法设计可以使开发更加便捷, 例如操作文档对象, 选择DOM元素, 制作动画效果, 事件处理, 使用Ajax以及其他功能
1.5 下载和使用
下载
- 使用前请先下载jquery-3.5.1.js(版本可自己选择)
- jquery下载地址: https://www.jq22.com/jquery-info122
使用
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数, 可以通过下面的标记把 jQuery 添加到网页中：
库的替代
- 如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的CDN
使用 Microsoft 的 CDN
Hello World程序
Title 注意:
- 使用jQuery一定要引入jQuery库
- jQuery中的$是一个函数
- 如何为按钮添加点击响应函数
二. jQuery的核心函数
$是jQuery的核心函数, 能完成jQuery的很多功能. $()就是调用$这个函数
传入参数为[函数]时:
- 表示页面加载完成之后,相当于window.onload = function () {);
传入参数为[HTML字符串时]:
- 会对我们创建这个html标签对象
传入参数为[选择器字符串时]:
- $("#id属性值"); id选择器,根据id查询标签对象
- $("标签名"); 标签选择器,根据标签名查询标签对象
- $(".class属性值"); 类型选择器,可以根据class属性查询标签对象
传入参数为[DOM对象]时:
- 会把这个dom对象转换为jQuery对象
三. jQuery对象和Dom对象区分
3.1 DOM对象
- 通过getElementById()查询出来的标签对象是DOM对象
- 通过getElementByName()查询出来的标签对象是DOM对象
- 通过getElementByTagName()查询出来的标签对象是DOM对象
- 通过createElement()创建的对象是DOM对象
- Dom对象alert出来的效果是: [object HTML标签名Element]
3.2 jQuery对象
- 通过jQuery提供的API创建的对象, 是jQuery对象
- 通过jQuery包装的Dom对象, 是jQuery对象
- 通过jQuery提供的API查询到的对象, 是jQuery对象
- jQuery对象alert出来的效果是: [object Object]
- jQuery对象的本质是什么?
- jQuery对象是dom对象数组+jQuery提供的一系列功能函数
- jQuery对象和Dom对象的使用区别
- jQuery对象和Dom对象互相不能使用对方的属性和方法
3.3 Dom对象和jQuery对象相互转换
3.3.1 Dom对象转化为jQuery对象[重点]
- 先有Dom对象
- $(Dom对象) 就可以转换成为jQuery对象
3.3.2 jQuery对象转为Dom对象[重点]
- 先有jQuery对象
- jQuery对象[下标]取出相应的Dom对象
四. jQuery选择器[重点]
4.1 基本选择器[重点]
id 选择器,井号键后加id属性
- 根据id查找标签对象
.class 选择器
- 根据class查找标签对象
element 选择器
- 根据标签名查找标签对象
* 表示任意的, 所有的元素
selector1,selector2,selectorN 组合选择器
- 合并选择器1, 选择器2…选择器N的结果并返回
4.2 层级选择器[重点]
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素
- ancestor : 任何有效选择器
- descendant: 用以匹配元素的选择器, 并且它是第一个选择器(ancestor )的后代元素
parent > child: 在给定的父元素下匹配所有的子元素
- parent: 任何有效选择器
- child: 用以匹配元素的选择器, 并且它是第一个选择器(parent)的子元素
prev + next: 匹配紧接在prev元素后的next元素(单个,同级元素)
- prev : 任何有效选择器
- next: 一个有效选择器并且紧接着第一个选择器
prev ~ siblings: 匹配所有紧接在prev元素后的siblings元素(多个,同级元素)
- prev : 任何有效选择器
- siblings: 一个有效选择器并且紧接着第一个选择器
4.3 过滤选择器[重点]
4.3.1 基本过滤器
- :first: 获取第一个元素
- :last: 获取最后一个元素
- :not(selector): 去除所有与给定选择器匹配的元素
- :even: 匹配所有索引值为偶数的元素, 从0开始计数
- :odd: 匹配所有索引值为奇数数的元素, 从0开始计数
- :eq(index): 匹配一个给定索引值的元素,index从0开始计数
- :gt(index): 匹配所有大于给定索引值的元素,index从0开始计数
- :lt(index): 匹配所有小于给定索引值的元素,index从0开始计数
- :header: 匹配如 h1,h2,h3之类的标题元素
- :animated: 匹配所有正在执行动画效果的元素
- :focus:
4.3.2 内容过滤器
- :contains(text): 匹配包含给定文本的元素
- :empty: 匹配所有不包含子元素或者文本的空元素
- :parent: 匹配含有子元素或者文本的元素
- :has(selector): 匹配含有选择器所匹配的元素的元素
4.3.3 属性过滤器
- [attribute] :匹配包含给定属性的元素
- [attribute=value] :匹配给定的属性是某个特定值的元素
- [attribute!=value] :匹配所有不含有指定的属性, 或者属性不等于特定值的元素
- [attribute^=value] :匹配给定的属性是以某些值开始的元素
- [attribute$=value] :匹配给定的属性是以某些值结尾的元素
- [attribute*=value] :匹配给定的属性是以包含某些值的元素
- [attrSel1] [attrSel2] [attrSelN] :复合属性选择器, 需要同时满足多个条件时使用
4.3.4 表单过滤器
- :input : 匹配所有 input, textarea, select和button元素
- :text : 匹配所有 文本输入框
- :password : 匹配所有 密码输入框
- :radio : 匹配所有 单选框
- :checkbox : 匹配所有 复选框
- :submit : 匹配所有 提交按钮
- :image : 匹配所有 图片
- :reset : 匹配所有 重置阿按钮
- :button: 匹配所有 按钮
- :file : 匹配所有 文件域
- :hidden : 匹配所有 不可见元素,或者type为hidden的元素
4.3.5 表单对象属性
- :enabled : 匹配所有 可用元素
- :disabled : 匹配所有 不可用元素
- :checked : 匹配所有 选中的被选中元素(复选框, 单选框等,不包括select中的option)
- val()可以操作表单项的value属性值
- 使用size()方法获取选取到的元素集合的元素个数
- each方法是jQuery对象提供用来遍历元素的方法, 在遍历的function函数中, 有一个this对象, 这个this对象,就是当前遍历到的dom对象
- :selected : 匹配所有 选中的option元素
4.3.6 元素筛选
- eq() : 获取给定索引的元素
- first() : 获取第一个元素
- last() : 获取最后一个元素
- filter(exp) : 留下匹配的元素
- is() : 判断是否匹配给定的选择器, 只要有一个匹配就返回, true
- has(exp) : 返回包含有匹配选择器的元素的元素
- not(exp) : 删除匹配选择器的元素
- childen(exp) : 返回匹配给指定选择器的子元素
- find(exp) : 返回匹配给指定选择器的后代元素
- next() : 返回当前元素的下一个兄弟元素
- nextAll() : 返回当前元素后面所有的兄弟元素
- nextUntil() : 返回当前元素到指定匹配的元素为止的后面元素
- parent() : 返回父元素
- prev(exp) : 返回当前元素的上一个兄弟元素
- prevAll() : 返回当前元素前面所有的兄弟元素
五. jQuery属性操作
5.1 jQuery属性操作
html() : 它可以设置和获取起始标签和结束标签中的内容
- 和dom属性的 innerHTML 一样
text() : 它可以设置和获取起始标签和结束标签中的文本
- 和dom属性的 innerText 一样
val() : 它可以设置和获取表单项的value属性值
- 和dom属性的 value 一样
Title
jQuery获取事件对象
使用bind同时对多个事件绑定同一个函数,怎么获取当前操作是什么事件
十. 注册练习
<script type="text/javascript">
//页面加载完成后
$(function () {
//1. 验证用户名: 必须由字母数字下划线组成,并且长度为5到12位
//1.1 获取输入框中内容
var username = $("#username").val();
//1.2 创建正则表达式对象
var upattern = /^\w{5,12}$/;
//1.3 使用test方法验证
if (!upattern.test(username)) {
//1.4 提示用户结果
$("#usernameMsg").text("用户名不合法");
return false;
}else {
$("#usernameMsg").text("");
}
//2. 验证密码: 必须由字母数字下划线组成,并且长度为5到12位
//2.1 获取输入框中内容
var password = $("#upassword").val();
//2.2 创建正则表达式对象
var ppattern = /^\w{5,12}$/;
//2.3 使用test方法验证
if (!ppattern.test(password)) {
//2.4 提示用户结果
$("#passwordMsg").html("密码不合法");
return false;
}else {
$("#passwordMsg").html("");
}
//3. 验证确认密码: 和密码相同
//3.1获取确认密码内容
var confirmPwd = $("#confirmPassword").val();
//3.2和密码相比较
if (confirmPwd != password) {
//3.3提示用户结果
$("#rePwdMsg").html("密码不一致");
return false;
}else {
$("#rePwdMsg").html("");
}
//4. 邮箱验证
//4.1 获取输入框中内容
var email = $("#email").val();
//4.2 创建正则表达式对象
var epattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
//4.3 使用test方法验证
if (!epattern.test(email)) {
//4.4 提示用户结果
$("#emailMsg").html("邮箱不合法");
return false;
}else {
$("#passwordMsg").html("");
}
//5. 验证码
var code = $("#code").val();
//去掉验证码前后空格
code = $.trim(code);
if (code == null || code == ""){
$("#codeMsg").html("验证码不能为空");
}else{
$("#codeMsg").html("");
}
});
</script>十一. AJAX
- AJAX是一种浏览器通过js异步发起请求, 局部更新页面的技术
11.1 jQuery中的AJAX请求
$.ajax方法
- url : 表示请求的地址
- type : 表示请求的类型GET或POST请求
- data : 表示发送给服务器的数据
- 两种格式1. name=value&name=value 2. {key:value}
- success : 请求响应, 响应的回调函数
- dataType : 响应的数据类型
- 常用的数据类型有: text表示纯文本, xml表示xml数据,json表示json对象
十二. i18n国际化
Locale对象
Locale表示不同的 时区,位置,语言
- zh_CN : 中国,中文
- en_US : 英文,美国
properties属性配置文件
国际化配置文件命名规则
- baseName_local.properties
- 比如baseName是i18n
- 中文的配置文件名时: i18n_zh_CN.properties
- 英文的配置文件名时: i18n_en_US.properties
ResourceBundle.getBundle(): ResourceBundle类:
根据给定的baseName和Locale读取相应的配置文件, 得到的文字信息:
- ResourceBundle.getString(key);得到你想要的不同国家的语言信息
12.1 国际化测试
i18n_zh_CN.properties
username=用户名
password=密码
sex=性别
age=年龄i18n_en_US.properties
username=username
password=password
sex=sex
age=age测试
import org.junit.Test;
import java.util.Locale;
import java.util.ResourceBundle;public class MyTest {
@Test public void testLocale(){ //获取系统默认的语言,国家信息// Locale locale = Locale.getDefault();
// System.out.println(locale);//zh_CN//获取可用的语言,国家信息// for (Locale availableLocale : Locale.getAvailableLocales()) {
// System.out.println(availableLocale);
// }//获取中文,中国的常量的Locale对象 System.out.println(Locale.CHINA); //获取英文,美国的常量的Locale对象 System.out.println(Locale.US); } @Test public void testI18n(){ //得到我们需要的Locale对象 //Locale locale = Locale.US; Locale locale = Locale.CHINA; //通过指定的baseName和Locale对象,读取相应的配置文件 ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale); System.out.println("username: " + bundle.getString("username")); System.out.println("password: " + bundle.getString("password")); System.out.println("sex: " + bundle.getString("sex")); System.out.println("age: " + bundle.getString("age")); }}
12.2 页面国际化
例如我们有一个页面是1i8n.jsp
我们想要点击中英文按钮就能用不同的语言展示页面
中文|
英文//从请求头中获取locale信息(语言)
Locale locale = null;
String country = request.getParameter("country");
if ("cn".equals(country)) {
local = Locale.CHINA;
}else if ("us".equals(country)) {
locale = Locale.US;
}else {
local = request.getLocale();
}
System.out.println(locale);
//获取读取包(通过指定的baseName和Locale对象,读取相应的配置文件)
ResourceBundle bundle = ResourceBundle.getBundle("i18n", locale);最后把页面文字展示的地方用bundle.getString("username")这样的方式替换掉
12.3 使用JSTL标签库fmt实现国际化
手机扫一扫
移动阅读更方便
你可能感兴趣的文章