【JavaWeb】基础知识总结05 jQuery
一.jQuery简介及基本使用
1.jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
-以上定义来自百度百科=.=
2.
$(document).ready(
function() {
//将DOM对象转换为jQuery对象
varpElement = document.getElementByTagName("p")[0];
varpRlementjQuery = $(pElement);
varcm = $("#clickMe"); //获得的是id为clickMe的jQuery对象(数组)
//jQuery对象转换为DOM对象(第一种方式)
vart = cm[0]; //t是DOM对象
//第二种方式
vars = cm.get(0);
}
);
3.
$(document).ready(function() {
//一次获取所有标签名为a的对象，操作对所有对象有效
$("a").click(function () {
alert("Hello World");
} );
});
4.
if(document.getElementById("hello")){
document.getElementById("hello").style.color="red";
}
等同于下面这句
$("#hello").css("color","#ff0000");
alert($("#hello").css("color"));
alert($("#hello"));//结果为object,因为jQuery会先创建好相应对象再接收
alert($("#hello").get(0));//结果为undefined
5.类似于$(document).ready(function)的非jQuery方法
window.onload=function() {
varmyTable = document.getElementById("table1");
varmyTbody = myTable.getElementsByTagName("tbody")[0];
//注意element和elements =.=
varmyTrs = myTbody.getElementsByTagName("tr");
for(vari=0;i<myTrs.length;i++) {
if(i%2==0){
//在CSS中style="background-color"对应的javascript修改是下面的写法
myTrs[i].style.backgroundColor="red";
}
else{
myTrs[i].style.backgroundColor="blue";
}
}
}
6.$(xxx)==$().ready(xxx)==$(document).ready(xxx)
二.jQuery选择器
1.$()函数在很多JavaScript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中，$("#ID")用来代替document.getElementById()函数，即通过ID获取元素:$("tagName")用来代替document.getElementsByTagName()函数，即通过标签名获取HTML元素...
2.jQuery选择器的分类:
-基本选择器(basic)
$("#id")，根据id值找到匹配的元素，虽多只返回一个元素(如果该元素真的存在)，如果不存在，则返回一个空的jQuery对象。
$(".class")，根据css的class属性来返回一个集合，无论css类是否真的存在，只要定义在元素中就能被jQuery查询到
-层次选择器(level)
-过滤选择器(filter)
.基本过滤
.内容过滤
.可见性过滤
$("div:hidden").show(5000).css("xxx","xxx");使用此方法可以将隐藏的div显示出来，参数为多少毫秒后以css所设置的样式显示出来。相应的也有hidden方法可以将元素隐藏。
.属性过滤
.子元素过滤
.表单对象属性过滤
<select multiple></select>会显示所有下拉列表的选项而没有下拉框，一般用在选择对象移动的情况。
-表单选择器(form)
3.(注意)
$(".test :hidden") 选择class为test的元素当中的隐藏子元素
$(".test:hidden") 选择隐藏的class为test的元素
三.jQuery对HTML DOM的常见操作
1.HTML DOM常见操作
-查找节点
-插入节点
-删除节点
var removedLi = $("ulli:eq(3)").remove();
可以获取删除的节点对象在进行后续操作
//条件删除
$("ulli").remove("li[title!=2]");
//清空元素内容,元素本身还留在页面上
$("ul li:eq(3)").empty();
//非jQuery方法则使用removeChild()方法
-复制节点
$("ul li").click(function() {
$(this).clone().appendTo("ul");
$(this).clone(true).appendTo("ul");
});
clone(true)方是复制一个元素及其所有事件，
clone()方法是复制一个元素，不包含其所有事件
-替换节点
$("p").replaceWith("<ahref='xxx'>Baidu.com</a>");
用后面的替换页面上所有的p元素
$("<ahref='xxx'>Baidu.com</a>").replaceAll("p");
用前面的替换页面上所有的p元素
-包裹节点
$("p").wrap("<a><b></b></a>");
将p元素包裹到后面的最里层（同级别则第一个）
$("p").wrapInner("<a><b></b></a>");
用p元素包裹后面的内容,文本信息在最里层=。=
2.增添删除元素:
非jQuery：var input =document.createElement("input");
input.setAttribute("type","text");
jQuery ：var input =$("<input type='text'>");
3.$("p").attr("xxx");类似于$("p").css("xxx");
支持读写双操作，操作对象为属性
4.不使用jQuery进行文本框插入操作与使用jQuery进行操作，见下图：
5.清空一个元素使用innerHTML=""是效率最高的方法，没有之一。
6.js的链编程风格append一次后返回的还是调用append的对象，可以继续append。
7.$("ul li:eq(2)").insertAfter("ulli:eq(4)");将第3个li<移动>到第五个后面。
四.jQuery对属性和事件的操作
1.属性操作
.attr()方法
-获取与设置属性
设置单操作：$("p").attr("title":"welcome");
设置批量操作：$("p").attr({"title":"welcome","hello":"world"});
获取操作：$("p").attr("title");
.removeAttr()方法
-移除元素属性
$('p').removeAttr("title");
2.attr()与addClass()的区别
3.样式设置
非jQuery方法
jQuery方法
4.元素中class属性值可以有多个，相同类别的样式以后者为准。
5.$("p").toggleClass("another");
有此类样式则删除，没有则添加。
6.$("p").hasClass('another');
判断是否有another样式属性，返回ture和false。
7.$("p").is('.another');
判断是否有一个another的class属性，也可以判断其他(选择器)，返回ture和false。
8.注意下列两个方法的区别
$("p").text();
$("p").text("<b>hello</b>");
$("p").html();
$("p").html("<b>hello</b>");
9.$("button").val();与$("button").val("helloworld");
10.$("#username").focus();焦点获取时触发
$("#username").blur(); 焦点失去时触发
this.defaultValue(DOM对象的属性，表示页面加载时设置的value值)
11.$("body").children();获取body标签里的所有子元素集合。
12.event.stopPropagation();阻止事件传播
event.preventDefault();阻止浏览器默认行为
return false;等于以上两个的集合
13.绑定点击事件案例
※可以进行链式操作绑定多个同名事件，触发时会一一执行
14.执行时间ready比onload提前很多。
15.元素的隐藏与显示案例
※使用toggle方法传递2个参数(方法)，第一个为click一次时调用，第二个为再次click时调用
※使用hover方法传递2个参数(方法)，第一个为mouseover时调用，第二个为mouseout时调用
16.event.target获取事件源对象
17.事件的解除绑定
18.绑定只执行一次的事件
19.
$('#btn').trigger("click");
$('#btn').click();
代替用户执行一次click
20.自定义事件
21.同时绑定多个事件
22.jQuery动画效果
-fadeOut(),fadeIn(),可带时间参数
-slideUp(),slideDown(),可带时间参数
-$(this).animate()的使用见下图
五.jQuery实现异步请求
1.JSON的基本表示形式
2.传输格式：application/json
3.org-json库实例
import org.json.*;
public class test_json {
publicstatic void main(String[] args) {
StringjsonContent = "{'hello':'world' , 'abc':'xyz'}";
JSONObjectjsonObject = new JSONObject(jsonContent);
Stringstr1 = jsonObject.getString("hello");
Stringstr2 = jsonObject.getString("abc");
System.out.println(str1);
System.out.println(str2);
System.out.println("--------------------------");
jsonContent= "[{'hello':333 , 'abc':false , 'xyz':'test'} , {'hello':555 , 'abc':true, 'xyz':'haha123'}]";
JSONArrayjsonArray = new JSONArray(jsonContent);
for(inti=0; i<jsonArray.length(); i++) {
JSONObjectjsonObject2 = jsonArray.getJSONObject(i);
intvalue1 = jsonObject2.getInt("hello");
booleanvalue2 = jsonObject2.getBoolean("abc");
Stringvalue3 = jsonObject2.getString("xyz");
System.out.println(value1);
System.out.println(value2);
System.out.println(value3);
}
}
}
4.gson实例
public static void main(String[] args) {
Person person = new Person();
person.setUsername("guardian");
person.setPassword("zhuzhu123");
person.setAge(12);
person.setAddress("hhahahahah");
person.getList().add("hello1");
person.getList().add("hello2");
person.getList().add("hello3");
Gson gson = new Gson();
String result = gson.toJson(person);
System.out.println(result);
}
5.jQuery实现ajax异步请求
$(function() {
$("#button1").click(function(){
$.ajax(
{
type:"GET",
url:"AjaxServlet",
dateType:"html",
data:{'param1':$("#param1").val() , 'param2':$("#param2").val()},
success:function(returnedData) {
$("#result").val(returnedData);
}
}
);
});
});
6.简化版GET/POST的ajax异步请求方法兼xml的jQuery解析方法
$("#button1").click(function() {
$.post("XMLServlet", //此处也可换成get使用GET方式请求
{
name:$("#name").val()
},function(returnedData, status) {
varid = $(returnedData).find("id").text();
varname = $(returnedData).find("name").text();
varage = $(returnedData).find("age").text();
varadress = $(returnedData).find("adress").text();
varhtml = "<table width='60%' border='1' "+
"align='center'><tr><th>id</th><th>name</th><th>age</th><th>adress</th></tr>"+
"<tralign='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+adress+"</td></tr>";
$("#theBodytable:eq(0)").remove();
$("#theBody").append(html);
});
});
7.xml的构建
String name =request.getParameter("name");
Person person = new Person();
if ("zhangsan".equals(name)) {
person.setId(1);
person.setName("zhangsan");
person.setAddress("beijing");
person.setAge(30);
} else {
person.setId(2);
person.setName("lisi");
person.setAddress("shanghai");
person.setAge(20);
}
Document document =DocumentHelper.createDocument();
Element rootElement =document.addElement("users");
rootElement.addComment("This is aconmment");
Element userElement =rootElement.addElement("user");
Element idElement =userElement.addElement("id");
Element nameElement =userElement.addElement("name");
Element ageElement = userElement.addElement("age");
Element addressElement =userElement.addElement("adress");
idElement.setText(person.getId() +"");
nameElement.setText(person.getName());
ageElement.setText(person.getAge() +"");
addressElement.setText(person.getAddress());
// 设置响应头
response.setContentType("text/xml;charset=utf-8");
// 禁用缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
PrintWriter out = response.getWriter();
OutputFormat format =OutputFormat.createPrettyPrint();
format.setEncoding("utf-8");
XMLWriter xmlWriter = new XMLWriter(out,format);
xmlWriter.write(document);
out.flush();
8.利用google图片搜索的API实现从google上检索图片获取图片数据：
public class test_image {
publicstatic void main(String[] args) throws MalformedURLException, IOException {
Stringstr ="https://ajax.googleapis.com/ajax/services/search/images?q=macbook&rsz=large&satrt=0&v=1.0";
//建立连接，将连接结果以输入流输入
URLConnection conn = new URL(str).openConnection();
InputStream is = conn.getInputStream();
//一切为了效率
InputStreamReader isr = new InputStreamReader(is);
BufferedReader br = new BufferedReader(isr);
//StringBuffer的效率和安全性都要高于String
StringBuffer buffer = new StringBuffer();
String line=null;
while(null!=(line=br.readLine())){
buffer.append(line);
}
br.close();
isr.close();
is.close();
System.out.println(buffer);
}
}
9.InputStream(OutputStream)、InputStreamReader(OutputStreamWriter)与BufferedReader(BufferedWriter)一切为了操作效率
①InputStream OutputStream处理字节流的抽象类
InputStream 是字节输入流的所有类的超类,一般我们使用它的子类,如FileInputStream等
OutputStream是字节输出流的所有类的超类,一般我们使用它的子类,如FileOutputStream等
②InputStreamReader OutputStreamWriter处理字符流的抽象类
InputStreamReader 是字节流通向字符流的桥梁,它将字节流转换为字符流
OutputStreamWriter是字符流通向字节流的桥梁，它将字符流转换为字节流
③BufferedReader BufferedWriter
BufferedReader 由Reader类扩展而来，提供通用的缓冲方式文本读取，readLine读取一个文本行，从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取
BufferedWriter 由Writer 类扩展而来，提供通用的缓冲方式文本写入， newLine使用平台自己的行分隔符，将文本写入字符输出流，缓冲各个字符，从而提供单个字符、数组和字符串的高效写入
注：以上全部类容总结来自于北京圣思园Java_Web教学视频，总结只是为了方便自己查阅&和大家交流=.=
本文固定链接：http://blog.csdn.net/fyfmfof/article/details/25541753