JQuery

JQuery

介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

语言特点

快速获取文档元素
提供漂亮的页面动态效果
创建AJAX无刷新网页
提供对JavaScript语言的增强
增强的事件处理
更改网页内容

jQuery优点

面向集合，多行操作集于一行

程序入口

$(document).ready(function(){
alert("hello");
})

$(function(){
alert("hello");
})

jQuery三种工厂方法

1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt

注1：选择器，css选择器
标签选择器：("标签名")ID选择器：("标签名") ID选择器：("标签名")ID选择器：("#id")
类选择器：(".class")包含选择器：(".class") 包含选择器：(".class")包含选择器：(“标签名 标签名”)
组合选择器：$(标签名，标签名，标签名")
2 jQuery(element)
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
将要js转换成jquery：var 名字=名字=名字=(js值) 注：在jQuery中 $符号是命名的规范，表示是jQuery的变量

JQuery与Js对象的相互转换

Jquery转js

var $qu = $("#aa");
var qu = $qu.get(0);//第一种
var qu = $qu[0];//第二种
alert(qu.value);

js转Jquery

var qu = document.getElementById("#aa");
$qu = $(qu);
alert($qu.html());

this作用

$(":input").click(function(){
//事件源 this
alert(this.value);
$("a").each(function(index,item){
//当前元素 this
alert(index+","+$(this).html()+","+$(item).html());
})
})

json体现形式

//字符串体现形式
var a = {
sid:"s001",
sname:"zs"
}
console.log(a);
//数组体现形式
var b =[1,2,3,4]
console.log(b);
/混合模式体现形式
var c = {id:3,hobby:["a","c"]};
console.log(c);

Extend扩充

//json对象的字符串体现形式
var jsonObj = {
sid:"ss1",
sname:"xx"
}
var jsonObj2 = {
sid:"ss2",
sname:"xx",
hobby:["a","c"]
}
//$.extend是用来扩充jQuery类属性及方法的
var json = {};
//用后面的对象扩充第一个对象
//$.extend(json,jsonObj);
//讲解子覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖
//如果后面对象有新的属性，会据需扩充
$.extend(json,jsonObj,jsonObj2);
console.log(json);

//$.fn.extend是用来扩充jquery实例的属性或者方法所用
$.extend({
a:function(){
alert("bbb");
}
});
$("yellow").a();
alert("yellow");

Extend实列

//原生态
//默认值
$("table[id='t1'] tr:eq(0)").addClass("green");
$("table[id='t1'] tr:gt(0)").addClass("blue");

//动态效果
$("table[id='t1'] tr:gt(0)").hover(function(){
$(this).removeClass().addClass("yello");
},function(){
$(this).removeClass().addClass("blue");
});

//默认值
$("table[id='t2'] tr:eq(0)").addClass("fen");
$("table[id='t2'] tr:gt(0)").addClass("hui");

//动态效果
$("table[id='t2'] tr:gt(0)").hover(function(){
$(this).removeClass().addClass("red");
},function(){
$(this).removeClass().addClass("hui");
});

Ajax转换

Jackson是基于Java应用库，Jackson可以将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

Map<String,String> stu = new hashMap<>();
stu.add("01","gd");
stu.add("02","zg");
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj););

或者把json对象转为java对象,再用$.ajax时转为java对象

var stu = $.pareJSON(str);