【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.οnlοad=function() {
varmyTable = document.getElementById("table1");
varmyTbody = myTable.getElementsByTagName("tbody")[0];
//注意element和elements =.=
varmyTrs = myTbody.getElementsByTagName("tr");
for(vari=0;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方法可以将元素隐藏。 .属性过滤 .子元素过滤 .表单对象属性过滤 会显示所有下拉列表的选项而没有下拉框,一般用在选择对象移动的情况。 -表单选择器(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(" 用后面的替换页面上所有的p元素 $(" 用前面的替换页面上所有的p元素 -包裹节点 将p元素包裹到后面的最里层(同级别则第一个) 用p元素包裹后面的内容,文本信息在最里层=。= 2.增添删除元素: 非jQuery:var input =document.createElement("input"); input.setAttribute("type","text"); jQuery :var input =$(""); 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("hello"); $("p").html(); $("p").html("hello"); 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 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 = " "align='center'> " $("#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
"+
id name age adress "+id+" "+name+" "+age+" "+adress+" ";你可能感兴趣的:(JavaWeb)