一、、jQuery选择器
jQuery提供了丰富的选择器功能，jQuery选择器比JavaScript选择器更加的强大。
●JavaScript是如何直接获取元素节点
• getElementByld()：返回一个元素节点对象
• getElementsByName( )：返回多个元素节点(节点数组)
•getElementsByClassName()：返回多个元素节点对象(节点数组)
• getElementsByTagName()：返回多个元素节点对象(节点数组)
●基本选择器
1.id选择器：$("#id属性值”)
2.class选择器：$(".class属性值")$（"p.aa"）p标签并且有class="aa"的属性
3.标签选择器：$("标签名”)
4.通用选择器：$(”*")获取页面中的所有标签(html head title body..)
5.并集选择器：$("选择器，选择器，...")获取到每一个选择器获取到的元素
6.后代选择器：$("选择器1选择器2”)获取选择器1获取到元素的后代元素(选择器2获取到的后代元素)
7.子选择器：$（"选择器1>选择器2"）获取选择器1获取到元素的直接子元素(选择器2获取到的直接子元素)
8.后面第一个兄弟元素节点 prev + next
9.后面所有的兄弟元素节点prev~next
●属性选择器
1.[attribute]匹配包含给定属性的元素
2.[attribute1][attribute2]复合属性选择器，需要同时满足多个属性
3.[attribute=value]匹配给定的属性是某个特定值的元素
4.[attribute!=value]匹配所有属性不等于特定值的元素
5. [attribute^=value]匹配给定的属性是以某些值开始的元素
6.[attribute$=value] 匹配给定的属性是以某些值结尾的元素
7.[attribute*=value]匹配给定的属性是以包含某些值的元素
●位置选择器
•针对整个页面而言的位置选择器
1.:first 获取第一个元素
2.:last 获取最后一个元素
3.:odd匹配所有索引值为奇数的元素，从0开始计数
4.:even匹配所有索引值为偶数的元素，从0开始计数
5.：eq(n) 匹配一个给定索引值的元素，从0开始计数
6.:gt(n) 匹配所有大于给定索引值的元素
7.:It(n) 匹配所有小于给定索引值的元素
•针对上级标签而言的位置选择器
1.:first-child 匹配第一个子元素
2.:last-child匹配最后一个子元素
3.:nth-child(n)匹配其父元素下的第N个子元素
4.:nth-child(odd| even) 匹配其父元素下的奇偶元素
•第几个索引的元素：$(”选择器：eq(n)")
•奇数：$("选择器：odd")
•偶数：$("选择器：even")
•大于指定索引：$("选择器：gt(n)")
•小于指定索引：$("选择器：1t(n)")
●表单选择器
•关于表单项的选择器
1.:text :password :radio :checkbox:hidden :file :submit
2.:input 匹配所有input，textarea，select和button元素
•注意：S("input")和$(":input")的区别
1.$("input")：标签选择器，只匹配input标签
2.$(":input")：匹配所有input，textarea，select和button等元素
•关于表单项状态的选择器
1.:selected :checked :disabled
•通过选择器获取到元素节点，后去到元素节点后，才可以操作元素节点，操作该元素节点的属性结点，该元素节点的文本节点，该元素节点的样式
二、jQuery事件机制
事件驱动：监听对应的事件，触发了对应的事件，事件会被监听到，监听到事件后驱动函数的执行。
将由传统的HTML元素上完成事件的绑定改为由js/jQuery代码来完成对HTML元素的事件的添加操作。将事件和HTML元素之间进行解耦合。
●jQuery给元素绑定事件的格式：
$(function(){
$('选择器’).事件(function()
})；
})
●注意：
1.使用jQuery给元素绑定事件时，要写在页面加载完事件内。
2.这里的事件可以是click、blur、focus等等。不要写on。
三、jQuery动画
jQuery提供的动画中大致上有显示、隐藏、滑动、淡入、淡出等，还有自定义动画效果的方法。
•显示和隐藏动画
实现显示动画效果方法：show()
实现隐藏动画效果方法：hide()
实现切换显示和隐藏动画效果方法：toggle()
四、DOM编程
●操作文本
• html() 相当于innerHTML
html()获取文本节点(标签+文本)
html(标签) 添加标签，会覆盖原有的所有内容
•text()相当于innerText
text() 获取文本节点(文本)
text(文本内容)添加文本，会覆盖原有的所有内容
●操作属性
• attr(属性名) 获取属性值
• attr(属性名，属性值)设置属性值
•removeAttr(属性名)移除属性
•prop(属性名） 获取属性值
• prop(属性名，属性值)设置属性值
jQuery 1.6新增加prop()方法。如checked, selected、readonly、disabled使用prop()时，返回值是true或者false，更加方便处理。
•val() 获取value属性值
• val(值) 设置value属性值
●操作元素
•append()、appendTo()添加子元素节点(末尾)
父元素节点.append(新的子元素节点)
新的子元素节点appendTo(父元素节点)
•prepend()、prependTo()添加子元素节点(前置)
•before()、insertBefore()添加平级元素节点(前面)
•after()、insertAfter()添加平级元素节点(后面）
•parent() 获取父元素节点
•remove()删除元素节点
•empty()删除子元素节点
五、操作CSS
可以通过JavaScript或jQuery对页面元素的样式进行动态设置，实现页面样式的动态改变。
●直接操作CSS样式
css(css)
css(css,val)
css({css1:val1,css2:val2.....})
•本质上是修改指定元素的style属性的值。
•缺点是会涉及多个css样式的修改，稍显繁琐。可以将多个cSs样式定义为class类样式，直接操作class属性值即可。
●操作类样式
•addClass(值) 追加类属性值，而不是覆盖
• removeClass(值) 移除属性值
•toggleClass(值) 不存在，添加。存在，移除
•本质是修改指定元素的class属性值。
• addClass()只负责追加，而不是覆盖，所以必要时需要和removeClass()结合使用
六、表单验证
进行表单验证：保证数据符合要求
进行JavaScript或者jQuery表单验证：降低服务器端负担
●用户注册时进行表单验证
验证要求：
1.用户名不能为空
2.用户名长度大于6
3.密码同用户名的校验
4.邮箱格式正确，必须包含@
缺点：
仅能简单的校验长度，是否为空，是否为数字等。
对于用户名、密码、邮箱、手机号码、邮箱等验证，可以使用正则表达式进行验证，严谨而且简单。
七、正则表达式
使用正则表达式原因：简洁的代码；严谨的验证文本框中内容
● 正则表达式举例
1.匹配国内电话号码：^\d{3}-\d{8}|\d{4}-\d{7}$
2.匹配腾讯QQ号：^1-9{4,} $
3.匹配中国邮政编码：^\d{6} $
4.匹配身份证：^\d{15}\d{18} $
5.匹配由数字和26个英文字母组成的字符串^[A-Za-z0-9]+$
6. 匹配Email地址：^\w+([-+.]\w+)@lw+([-]w+).\W+([.]\W+)*$
7.匹配中文字符的正则表达式：^u4e00-\u9fa5]$
什么是正则表达式
●正则表达式
1.Regular Expression，在代码中常简写为regex
2.正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。
3.在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。如何创建正则表达式
●如何创建正则表达式
1.var reg=/china/;
2. var reg=new RegExp("china");
●正则表达式的通配符号
[abc] 匹配任意一个字符即可
[^abc] 匹配任意一个不再指定中的字符即可
[0-9] 匹配e-9之间的任意一个数字
[a-z] 匹配小写字母a-z之间的任意一个字母 26
[A-Z] 匹配大写字母A-Z之间的任意一个字母 26
[A-z] 匹配大写字母A-z之间的任意一个字母 52
[A-z0-9] 匹配大写字母A-z之间获取0-9之间的任意一个字母
(red|blue|green)：匹配任意一个单词
\w 字母，数字，_
\W 除了字母，数字，_，其它都符合
\d 数字
\D 除了数字的其他字符
^ 以什么开始
$ 以什么结束
+ 至少一个
* 零个|多个
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
\s 任何空白字符
\S 任何非空白字符
. 除了换行符之外的任意字符
●正则表达式的重复字符
{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次
* 匹配前一项0次或多次，等价于{0，}
+ 匹配前一项1次或多次，等价于{1，}
? 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0，1}
●RegExp 对象属性
FF:Firefox, IE: Internet Explorer
global RegExp对象是否具有标志g。
ignoreCase RegExp对象是否具有标志i。
lastIndex 一个整数，标示开始下一次匹配的字符位置。
multiline RegExp对象是否具有标志m。
source 正则表达式的源文本。
八、JavaWeb中路径的说明
1.JavaWeb中的路径
在JavaWeb中，路径分为相对路径和绝对路径两种：
•相对路径：
/ 表示当前目录(可省略)
../ 表示当前文件所在目录的上一级目录
•绝对路径：
http://ip:port/工程名/资源路径
●在JavaWeb中/的不同意义
•/斜杠 如果被浏览器解析，得到的地址是：http://ip:port/
<a href="/"斜杠</a>
<form action="/">
•/斜杠 如果被服务器解析，得到的地址是：http://ip:port/工程路径/
<url-pattern>/Servlet1</url-pattern>
request.getRequestDispatcher("/”)
•特殊情况：response.sendRedirect("")；把斜杆发给浏览器去解析，得到http://ip:port/
九、AJAX
●目前浏览器和服务器交互的请求发送方式
•浏览器和服务器进行数据交互的基本流程为：
1.浏览器发起http请求
2.服务器收到请求，对请求进行解析
3.服务器根据请求解析结果调用对应的资源处理请求
4.服务器将处理结果响应给浏览器
5.浏览器收到响应结果，对结果数据进行解析
6.浏览器将解析后的数据展示在页面
●可以让浏览器发送请求的方式有：
1.在浏览器地址栏输入url地址后回车
2.使用超链接
3.使用form表单
4.在js代码中使用window.location.href
●Ajax
Ajax(Asynchronous Javascript And XML)是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。
作用：
实现了在当前网页中显示新的响应内容。(不会覆盖掉原有内容)
特点：
1.一种新的让浏览器发起http请求的技术
2.使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示
3.Ajax是一门基于JavaScript的技术，由浏览器解析运行，是一种前端(客户端)技术
4.简单易用
●传统请求：
1.ur1地址栏发起请求
2.form表单发起请求
3.a超链接发请求
4.location.href 发起请求
由浏览器直接发起请求，服务器响应回什么内容，浏览器展示什么内容，刷新整张页面
●Ajax发送求：
借助于xhr对象发送请求
页面不动，发起请求，接收到客户端响应的数据。
●同步与异步请求
●同步请求：
•发送请求后，一直等待服务端的响应，获取到服务端响应，再执行其他的逻辑代码。
1.在浏览器地址栏输入url，发起请求
2.使用超链接，发起请求
3.使用form表单，发起请求
4.在js代码中使用window.location.href，发起请求
5. ajax发起同步请求
ajax与其他方式发送同步请求的区别：ajax可以局部刷新，其他的请求会刷新整张页面
●异步请求：
•发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。
1.ajax发起异步请求
●Ajax的同步和异步设置
Ajax执行步骤：
1.创建Ajax请求对象
2.建立连接
3.发送连接
4.监听状态变化及结果处理
● Ajax的get请求和post请求及请求参数
•Ajax设置get请求方式及携带请求参数：
Ajax的get请求的请求参数是直接写在请求路径后面
●Ajax设置post请求方式及携带请求参数：
•Ajax的post请求传递参数是需要单独写在send方法中，而且需要设置请求头，该请求头表示此次请求是以表单的方式提交
●readyState的值表示的含义：
• 0：请求没有开启(在调用open()之前)
•1：请求已经建立但是还没有发出(调用send()之前)
•2：请求已经发出，服务器正在处理
•3：请求已经处理，响应中有数据可用，但是服务器还没有完全响应完
• 4：响应已经完成，浏览器已经接收到全部的响应内容
●Ajax请求的响应状态
通过对ajax的就绪状态做判断，在就绪状态是4的情况下编写对响应结果的处理逻辑代码，但是不是任何响应结果都要处理，因为服务器的响应也有状态码，比如：200、404、500等等。
所有在ajax中编写响应结果处理时，也必须考虑响应状态码。
●Ajax_jQuery封装ajax_没有参数
jQuery为js的函数库，将js复杂的操作进行了函数式的封装。
调用jQuery中的函数即可.
注意：必须使用jQuery对象调用jQuery中的函数.
传统的请求：同步请求，浏览器直接发起请求，一致等待服务端的响应，响应回来后刷新整张页面.
1.地址栏
2.a超链按
3.form表单
4.location.href
●ajax：借助与xhr对象发送请求，接收响应，页面不动还可以向服务端发起请求，接收响应，局部刷新.
1.同步请求
xhr发送同步请求后，等待服务端的响应.
2.异步请求
xhr发送异步请求后，继续执行，通过监听准备状态的变化驱动函数的执行，获取响应的数据，事件回调(回调函数)
十、jQuery封装的ajax的使用
目前编写的Ajax代码访问服务器及对响应结果的处理流程如下：
1.在页面编Ajax相关代码
2.用户通过浏览器访问页面
3.用户在浏览器中触发事件，发起ajax请求
4.服务器收到请求进行处理，处理完后按照json格式的字符串响应给浏览器
5.浏览器收到响应数据后，触发回调函数的执行，将响应结果展示在当前的页面
jQuery是js的一个库，其实jQuery中已经对Ajax完成了封装，形式多样：
●第一种：
$.ajax()
dataType：用来指定服务器返回来的数据类型，可选值有如下：
xml：表示服务器返回的是xml内容
html：表示服务器返回的是html文本内容
script：表示服务器返回的是script文本内容
json：表示服务器返回的是json内容(重点)
jsonp:表示使用jsonp形式调用函数，早期我们用它来解决跨域问题
text：表示服务器返回的是纯文本字符串
●第二种：
$.get“请求地址”，“请求参数”，回调函数，返回的数据类型)
$.post(“请求地址”，“请求参数”，回调函数返回的数据类型)
回调函数主要是用来处理服务器对我们的响应结果。
返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml,html,script,json,text。
●第三种：
$.getJSON("请求地址”，"请求参数”，"回调函数”)
这种方式要求服务器返回的数据类型得是json格式的。
●第四种：
$.getScript("请求地址”，"回调函数")
这种方式是发送ajax请求获取一个js文件。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
