【JavaWeb】基础知识总结05 jQuery

[b]【JavaWeb】[/b]基础知识总结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