流行的js库
jQuery dojo ext js
<a href="#" οnclick="" >
v:with
with(document){
write("<ol>");
write("<li>hello</li>");
write("<li>hello</li>");
write("</ol>");
}
v: for(var i in obj){
str +=objstring+"."+i+" = " +obj[i] +"<br>";
}
//便利obj所有属性 i表示属性,obj[i]表示属性值
//与java不同
v: var date = new Date();
date.getDay() 代表星期几
date.getDate()代表一个月的几号。
v:数组定义三种
一般["apple","pear","orange"]
fruit.join();
fruit.join(":")
fruit.reverse().join()
fruit.valueof();
v:定义对象
构造函数定义对象
定义对象的函数
//构造函数方法 定对象方法
function membe(name ,gender){
this.name = name;
this.gender = gender;
this.display = display;//指定member对象的display方法
}
function display(){
var str = this.name +" : " + this.gender;//this 很重要
}
v:οnclick="window.location.href=''"//非超链接,单引号。
v:定时器:用以指定在一段特定的时间执行某段程序。
setTimeout("alert('执行成功')",7000); //七秒后执行xxx,字符串执行方式?
setInterval(,);重复执行直到程序框架关闭。或 clearInterval();
var timeId = setInterval(count,1000);
clearInterval(timeId);
v:onblur();
v:事件
通常 οnclick="count()";
另外:
function getEvent(event){
alert("事件类型:"+event.type);// 默认参数 ??? event 查资料。。。
}
document.onmousedown = getEvent;//无法传参数,要自己获取
v:history.back();
window.history.back();return false;
v:<body οnlοad=""> 表示页面都已加载完成。。。
v:document.links 当前页面链接数量。
v:<body οnlοad="document.forms[0].element[0].focus();">
οnkeyup="moveNext" //长度够了自动转到下个
v:js 也可创建cookie
document.cookie = "name=zhang;expires="+date.toGMTString();+";//执行完cookie表示就写到硬盘了
date.toGMTString();//js规定的日期。
document.writeln(document.cookie);//读取
coockie 两种类型。持久类型;会话coockie 只在浏览器进程内存里。
v:js 操作css
n.style.display="none";元素的样式的属性
n.style.display= "block";
parseInt();//1234=1234 1234aaa = 1234
v:在js中函数就是对象
function add(number){
}
// var add = function(number){ //add是对象的引用
//}
function add(number,number1){
}
//var add = function(number,number1){};//实际框架是这种方式。
add(10);
//中没有方法重载概念。
v:undified 是Undified数据类型的唯一值。
v:在Js中有一个Function对象,所有自定义的函数都是Function对象类型的。
var add = new Function("number","alert(10)")//最后一个参数是方法体
v:// arguments[0];//函数默认有arguments对象。表示实际传给函数的参数。
arguments.length
v:借助arguments可以模拟重载。
v:function add (number){};
add.length//1 表示函数期望接受的参数个数。
v:js中有五种原始数据类型:Undefied ,Null,Boolean,Number,String
var s;
alert(s);//undified
v:Null 值只有 null
v:如果逻辑表达是不是undified,null ,defied则
v:var s = new String(''");// type of object
var s = "xx";//type of string
v: type 是一元运算符。。。获取对象类型 undified ,boolean,string ,number, object.
v:在js中如果没有声明返回值或return;则返回undefind
v:undefined 从 null派生过来的。
v:3强制类型转换 Boolean(value), Number(value), String(value);
v:var s = new String("x"); //声明对象
var s= String("x");//强制类型
v:js中所有对象继承object
v; var 表示局部, 无表示全局。。。
v: object 中的所有属性无法通过 for (var v in object)枚举出
object.propertyIsEnuralble("prototype")
v:js动态语言,动态增加属性。
js: object.username ; object["username"]; //两种声明属性。
var object = {username:"张三",password:"xxx"};//也可,常用定义方式
js:delete object.username; //表示删除object的属性。
js: array.sort(); //升序, 1,25,3 不是按数字排序而是按照字符串排
array.sort(compare);//自己实现compare 方法。实现排序。 compare方法是对象的应用// 自己实现比较器 做一示例。
v:js中定义对象的几种方式(js中没有类只有对象)
1.基于已有对象扩充对象属性和方法
2.工厂模式
function createObj(){
var object = new Ojbect();
object.get = fucntion(){//多个方法,耗内存。将get放在对象外,只有唯一一份
alert();
}
}
3.构造函数方式
function Person(){
//js引擎默认生成 object
this.username = "zhang"
//隐藏return;
}
var person = new Person();
4.原型(“prototype”)方式
function Person(){
}
Person.prototype.username = "zhangsan";//原型所属对象有属性了。
Person.prototype.getInfo = getInfo(){};//方法
var person = new Persion();
//对象属性为共享,String为常量, Array为引用。
v:.原型+构造函数方式来;将属性放在构造函数中,方法定义在原型中。
5.动态原型。
function Person(){
if(typeof Person.flag == "undefined"){
Person.prototype.getInfo = function(){};
Person.flag = true;
}
}
v:js中的继承
1.对象冒充
function Parent(username){}
function Child(username,pass){
this.method = Parent;
this.method(username);
delete this.method;//此三步继承了parent
this.pass = //扩展
}
2.call; Function对象中的方法。test.call(object,xx)相当于调用test(),object相当于this,xx相当于test参数 。
function call(str){
alert(this.name + str);
}
function Child(username,child){
Parent.call(this,username);
}
3.apply 类似于call,不过第二个参数是array。
4.原型链
Child.prototype = Parent
5.混合方式(类似上述的混合模式。。。);//有啥优缺点,并举例
v: NaN not a number
v:掌握好静态和动态语言。。。。
v:firebug 日志输出。。。
console.log(); info warn error debug
v:jsUnit.net
v:jsUnit测试函数遵循的规则和Junit3.8 类似。
v: jsunit 和 juint 的setup teardown 不一样。
v:defaultclass afterclass 只运行一次。
setUpPage(); //类似于defaultclass 无 afterclass
setUpPageStatus = "complete";//必须要写。
v:Ajax asynchronous javaScript and xml .
v:ajax 弊端 前进后退失败。。。
v:Ajax中重要对象 XMLHttpRequest,IE6 以后都是内置这个对象。。。
v:
function ajaxSubmit(){
var xmlHttpRequest = null;//
alert("");
if(window.ActiveXObject){//IE浏览器
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//除IE外的其他浏览器
xmlHttpRequest = new XMLHttpRequest();
}
if(null != xmlHttpRequest)
{//准备向服务器
xmlHttpRequest.open("GET","AjaxServlet");// 请求方式,请求的资源,boolean true(异步/80%), false(同步)。 还有两个用//户名密码没啥用
//xmlHttpRequest.open("GET","AjaxServlet"+?vi=x&v2=xx);//get加参数
//xmlHttpRequest.open("POST","AjaxServlet");// post 不用加参数 在send中加参数
//类似回调函数,具体处理方法,关联之
xmlHttpRequest.onreadystatechange = ajaxCallBack;//函数的名字, 对应四种状态,调了四次。
xmlHttpRequest.send();//get 没参数, post要附加信息
//xmlHttpRequest.setRequestHeader("Cotent-type","application/x-wwwxxxx");//post 必须设置编码方式。
//xmlHttpRequest.send(“v1”=x+"&v2="+xx);//post 加参数
}
function ajaxCallBack(){
//判断xmlHttpRequest.readyState == 4 响应处理完
if(xmlHttpRequest == 4){
if(xmlHttpRequest.state == 200){//服务器端正常返回
var responseText = xmlHttpRequest.responseText;// 正常responseXML;
document.xxxx.div.inerHTML = responseText;
}
}
}
}
v:设置不缓存css ,html. //html中header中各参数意义。。。。
在serverlet 中 resp.setHeader("pragma","no-cache");
resp.setHeader("cache-control","no-cache");
v:fireFox 没有支持 同步。。。 false
v:jquery 使用
$经常用
$(document) 将dom对象转换成jquery对象。
$(document).ready(function(){//ready 方法是等页面加载完
alert("xx");
})
v: jquery 的口号是:write less ,do more
v:window.onLoad = test1;
window.onLoad = test2;//只有test2 被加载执行
ready();//写了几个,就执行几个。
v: $("a").click(function(){//将 超链接转为jquery对象
alert("xxx");//所有超链接都会弹框。
})
v:从上面可以看到jquery中很多方法来自dom中的属性。
v:dom 和 jquery 互相转换。
var pElementjQuery = $(pElement);
alert("dom" + pElement.innerHTML);
alert("jquery"+ pELementjQuery.html());
-----------------------------------------------
var cm = $("#clickMe");//获取页面中Id为clickMe元素: 什么不加表示标签,# ID,. CSS//获取的都是数组
//jQuery对象转换为DOM对象(第一)
var t = cm[0];//t是dom对象
t.(t.innerHTML);
//jQuery对象转dom(第二)
var s = cm.get(0);
alert(s.innerHTML);
v:
document.getElementById("hello").style.color = "red";//页面无ID,则报null.//js最好要判断。
$("#hello").css("color",“ff0000”);//没有错误,不存在就忽略,不会报错。
alert($("#hello"));//返回object ,虽然dom没有
alert($("#hello").length);//返回0,返回对象数组的个数。
$("#hello").css("color");//少一个参数表示都css的color属性,两个参数表示写属性
v:js操纵CSS 和 样式表区别。
style = "background-color"//css
style.backgroundColor//js
v:jQuery 选择器特重要 二三十个吧,有规律。
css选择器:
标签选择器: td{font-size:20;} p……
ID选择器: #ID{}
类选择器 div.note{};//特定元素的class .dream{}//当前页面所有calss=dream
群组选择器:
……
jQuery选择器:
-基本选择器:
$("div") $(".mini") $("#btnSubmit")
-层次选择器:
$(" div span") :选取div 中所有后代 span 元素。
$("div > span") :选取div 下子 span
$(".one + div"): .one 的下一个 div 等同于$(".one").next();
$("#btnxx ~ div"):id 为btnxx 后所有兄弟 div 等同于$("#btnxx").nextAll();
$("#btnxx").sibling(); 所有前后兄弟;
js中类似方法:
-过滤选择器:
子类:
基本选择器: :first :last :not () :even :odd :eq(index) :gt(index) :lt(index) :header
内容过滤器::contails(text) :empty :has(p) :parent
可见过滤器 :hidder :visible
$('div:hidden').show(5000).css('background ','blue');//方法链
属性过滤器:$('div[id]') $('div[title='test']') …… != ^= $= [][]
子元素过滤:$("div.one :nth-child(2)") $("div.one :first") $("div.one :last-child") $("div.one :only-child")
表单对象属性过滤: :enable :disable :selected
表单过滤::text :password :radio
alert($('#form1 :imput').length); 15
alert($('#form1 input')); 12
-表单选择器:
v:
<a><b>google<b></a>
.html();//返回所有标签里内容。 <b>google<b>
.text();//不返回标签。
v:<select multiple> 多选
$("#form1 input:enabled").val("hello word");//val 赋值
$("#form1 input:gt(2):enabled").val("hello word");//val 赋值
$('select:first').each(fucntion())
---
v:Html Dom 常见操作。
查:
attr("",""); 写 attr("");读
增:
js:
var input= document.createElement("input"); //参数是创建的标签名
input.setAttribute("type","text");// input.type = "text";
document.getElementById("div").appendChild(input);
jquery:
append();//子元素
appendTo();// 颠倒 append();子元素
prepend();//prependTo();// 子元素
after();//兄弟元素 insertAfter(); $("ul li:eq(2)").insertAfter("ul li:")
before();//insertBefore(); 相反 兄弟元素
删:.remove();
替换:.replaceWith(); .replaceAll();
复制:
$("ul li").clik(function(){$(this).clone(true/或不填).apendTo("ul")});
包裹:.wrap();.wrapInner();
var $v = $("p"); 命名 变量有$ 表示是jquery对象。
属性操作:removeAttr(); .addClass()//附加样式 并集; .removeClass()//移除,可指定参数;.toggleClass("another")//两种状态切换; .hasClass(""); is
Event处理
1.js事件的冒泡处理机制。
v:事件绑定
$('span').bind("click",function(event){});//span.onclick = function;
v:去除绑定
unbind(“click”,functionName);//参数选择器。
v:
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");});
v:
.one() //执行一次后失效。
event.stopPropagation();//停止事件的传播(冒泡)。
v:
.trigger("click");//模拟用户操作。
event.preventDefualt();
<input type="submit" />
click:如果为空 停止提交。//return false阻止事件提交和传播。
v:加载时机
js.onLoad()//页面结构,外部文件图片,css全部好了之后才触发。
jquery.read();//页面结构好了就ok。
v:动画
hide(); show(); facadIn(); faceOut(); slied……();
.animate({left:"500px"},3000,function(){});// 名值对 需要距离500px ; +=500px //可以每次都移
v:
.css("opacity","0.5");//设置不透明度
v:.animate().animate().css();//遗憾的不是最后调;可以使用回调函数。
v:json
MIME Media Type: 服务器设置报文头。
text/html
application/json
text/xml
v: json 解码,编码 器。。。。
v:json 是 ajax 的x
v:
$.ajax({
type:"POST",
url:"MyServlet",
dateType:"html",//默认html , 也可设为xml,json
success:function(returnedData){
}
})
简化:$.post("XMLServlet",{//传递数据},function(returnedData,status){});
v:
servlet ajax 返回xml给客户端,注意设置
resp.setContentType("text/xml;charset=utf-8");
禁用浏览器缓存:resp.setHeader("pragma","no-cache"); resp.setHeader("cache-control","no-cache");
OutputFormat \ XMLWriter 设置xml输出格式 如 utf-8.
v: xml 对象转jquery 对象
$(returnedData) .find("id").text();//直接找标签
v:
resp.setContentType("application/json;charset=utf-8");
v:google 提供图片,ajax接口 ;//flickr。
jQuery dojo ext js
<a href="#" οnclick="" >
v:with
with(document){
write("<ol>");
write("<li>hello</li>");
write("<li>hello</li>");
write("</ol>");
}
v: for(var i in obj){
str +=objstring+"."+i+" = " +obj[i] +"<br>";
}
//便利obj所有属性 i表示属性,obj[i]表示属性值
//与java不同
v: var date = new Date();
date.getDay() 代表星期几
date.getDate()代表一个月的几号。
v:数组定义三种
一般["apple","pear","orange"]
fruit.join();
fruit.join(":")
fruit.reverse().join()
fruit.valueof();
v:定义对象
构造函数定义对象
定义对象的函数
//构造函数方法 定对象方法
function membe(name ,gender){
this.name = name;
this.gender = gender;
this.display = display;//指定member对象的display方法
}
function display(){
var str = this.name +" : " + this.gender;//this 很重要
}
v:οnclick="window.location.href=''"//非超链接,单引号。
v:定时器:用以指定在一段特定的时间执行某段程序。
setTimeout("alert('执行成功')",7000); //七秒后执行xxx,字符串执行方式?
setInterval(,);重复执行直到程序框架关闭。或 clearInterval();
var timeId = setInterval(count,1000);
clearInterval(timeId);
v:onblur();
v:事件
通常 οnclick="count()";
另外:
function getEvent(event){
alert("事件类型:"+event.type);// 默认参数 ??? event 查资料。。。
}
document.onmousedown = getEvent;//无法传参数,要自己获取
v:history.back();
window.history.back();return false;
v:<body οnlοad=""> 表示页面都已加载完成。。。
v:document.links 当前页面链接数量。
v:<body οnlοad="document.forms[0].element[0].focus();">
οnkeyup="moveNext" //长度够了自动转到下个
v:js 也可创建cookie
document.cookie = "name=zhang;expires="+date.toGMTString();+";//执行完cookie表示就写到硬盘了
date.toGMTString();//js规定的日期。
document.writeln(document.cookie);//读取
coockie 两种类型。持久类型;会话coockie 只在浏览器进程内存里。
v:js 操作css
n.style.display="none";元素的样式的属性
n.style.display= "block";
parseInt();//1234=1234 1234aaa = 1234
v:在js中函数就是对象
function add(number){
}
// var add = function(number){ //add是对象的引用
//}
function add(number,number1){
}
//var add = function(number,number1){};//实际框架是这种方式。
add(10);
//中没有方法重载概念。
v:undified 是Undified数据类型的唯一值。
v:在Js中有一个Function对象,所有自定义的函数都是Function对象类型的。
var add = new Function("number","alert(10)")//最后一个参数是方法体
v:// arguments[0];//函数默认有arguments对象。表示实际传给函数的参数。
arguments.length
v:借助arguments可以模拟重载。
v:function add (number){};
add.length//1 表示函数期望接受的参数个数。
v:js中有五种原始数据类型:Undefied ,Null,Boolean,Number,String
var s;
alert(s);//undified
v:Null 值只有 null
v:如果逻辑表达是不是undified,null ,defied则
v:var s = new String(''");// type of object
var s = "xx";//type of string
v: type 是一元运算符。。。获取对象类型 undified ,boolean,string ,number, object.
v:在js中如果没有声明返回值或return;则返回undefind
v:undefined 从 null派生过来的。
v:3强制类型转换 Boolean(value), Number(value), String(value);
v:var s = new String("x"); //声明对象
var s= String("x");//强制类型
v:js中所有对象继承object
v; var 表示局部, 无表示全局。。。
v: object 中的所有属性无法通过 for (var v in object)枚举出
object.propertyIsEnuralble("prototype")
v:js动态语言,动态增加属性。
js: object.username ; object["username"]; //两种声明属性。
var object = {username:"张三",password:"xxx"};//也可,常用定义方式
js:delete object.username; //表示删除object的属性。
js: array.sort(); //升序, 1,25,3 不是按数字排序而是按照字符串排
array.sort(compare);//自己实现compare 方法。实现排序。 compare方法是对象的应用// 自己实现比较器 做一示例。
v:js中定义对象的几种方式(js中没有类只有对象)
1.基于已有对象扩充对象属性和方法
2.工厂模式
function createObj(){
var object = new Ojbect();
object.get = fucntion(){//多个方法,耗内存。将get放在对象外,只有唯一一份
alert();
}
}
3.构造函数方式
function Person(){
//js引擎默认生成 object
this.username = "zhang"
//隐藏return;
}
var person = new Person();
4.原型(“prototype”)方式
function Person(){
}
Person.prototype.username = "zhangsan";//原型所属对象有属性了。
Person.prototype.getInfo = getInfo(){};//方法
var person = new Persion();
//对象属性为共享,String为常量, Array为引用。
v:.原型+构造函数方式来;将属性放在构造函数中,方法定义在原型中。
5.动态原型。
function Person(){
if(typeof Person.flag == "undefined"){
Person.prototype.getInfo = function(){};
Person.flag = true;
}
}
v:js中的继承
1.对象冒充
function Parent(username){}
function Child(username,pass){
this.method = Parent;
this.method(username);
delete this.method;//此三步继承了parent
this.pass = //扩展
}
2.call; Function对象中的方法。test.call(object,xx)相当于调用test(),object相当于this,xx相当于test参数 。
function call(str){
alert(this.name + str);
}
function Child(username,child){
Parent.call(this,username);
}
3.apply 类似于call,不过第二个参数是array。
4.原型链
Child.prototype = Parent
5.混合方式(类似上述的混合模式。。。);//有啥优缺点,并举例
v: NaN not a number
v:掌握好静态和动态语言。。。。
v:firebug 日志输出。。。
console.log(); info warn error debug
v:jsUnit.net
v:jsUnit测试函数遵循的规则和Junit3.8 类似。
v: jsunit 和 juint 的setup teardown 不一样。
v:defaultclass afterclass 只运行一次。
setUpPage(); //类似于defaultclass 无 afterclass
setUpPageStatus = "complete";//必须要写。
v:Ajax asynchronous javaScript and xml .
v:ajax 弊端 前进后退失败。。。
v:Ajax中重要对象 XMLHttpRequest,IE6 以后都是内置这个对象。。。
v:
function ajaxSubmit(){
var xmlHttpRequest = null;//
alert("");
if(window.ActiveXObject){//IE浏览器
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){//除IE外的其他浏览器
xmlHttpRequest = new XMLHttpRequest();
}
if(null != xmlHttpRequest)
{//准备向服务器
xmlHttpRequest.open("GET","AjaxServlet");// 请求方式,请求的资源,boolean true(异步/80%), false(同步)。 还有两个用//户名密码没啥用
//xmlHttpRequest.open("GET","AjaxServlet"+?vi=x&v2=xx);//get加参数
//xmlHttpRequest.open("POST","AjaxServlet");// post 不用加参数 在send中加参数
//类似回调函数,具体处理方法,关联之
xmlHttpRequest.onreadystatechange = ajaxCallBack;//函数的名字, 对应四种状态,调了四次。
xmlHttpRequest.send();//get 没参数, post要附加信息
//xmlHttpRequest.setRequestHeader("Cotent-type","application/x-wwwxxxx");//post 必须设置编码方式。
//xmlHttpRequest.send(“v1”=x+"&v2="+xx);//post 加参数
}
function ajaxCallBack(){
//判断xmlHttpRequest.readyState == 4 响应处理完
if(xmlHttpRequest == 4){
if(xmlHttpRequest.state == 200){//服务器端正常返回
var responseText = xmlHttpRequest.responseText;// 正常responseXML;
document.xxxx.div.inerHTML = responseText;
}
}
}
}
v:设置不缓存css ,html. //html中header中各参数意义。。。。
在serverlet 中 resp.setHeader("pragma","no-cache");
resp.setHeader("cache-control","no-cache");
v:fireFox 没有支持 同步。。。 false
v:jquery 使用
$经常用
$(document) 将dom对象转换成jquery对象。
$(document).ready(function(){//ready 方法是等页面加载完
alert("xx");
})
v: jquery 的口号是:write less ,do more
v:window.onLoad = test1;
window.onLoad = test2;//只有test2 被加载执行
ready();//写了几个,就执行几个。
v: $("a").click(function(){//将 超链接转为jquery对象
alert("xxx");//所有超链接都会弹框。
})
v:从上面可以看到jquery中很多方法来自dom中的属性。
v:dom 和 jquery 互相转换。
var pElementjQuery = $(pElement);
alert("dom" + pElement.innerHTML);
alert("jquery"+ pELementjQuery.html());
-----------------------------------------------
var cm = $("#clickMe");//获取页面中Id为clickMe元素: 什么不加表示标签,# ID,. CSS//获取的都是数组
//jQuery对象转换为DOM对象(第一)
var t = cm[0];//t是dom对象
t.(t.innerHTML);
//jQuery对象转dom(第二)
var s = cm.get(0);
alert(s.innerHTML);
v:
document.getElementById("hello").style.color = "red";//页面无ID,则报null.//js最好要判断。
$("#hello").css("color",“ff0000”);//没有错误,不存在就忽略,不会报错。
alert($("#hello"));//返回object ,虽然dom没有
alert($("#hello").length);//返回0,返回对象数组的个数。
$("#hello").css("color");//少一个参数表示都css的color属性,两个参数表示写属性
v:js操纵CSS 和 样式表区别。
style = "background-color"//css
style.backgroundColor//js
v:jQuery 选择器特重要 二三十个吧,有规律。
css选择器:
标签选择器: td{font-size:20;} p……
ID选择器: #ID{}
类选择器 div.note{};//特定元素的class .dream{}//当前页面所有calss=dream
群组选择器:
……
jQuery选择器:
-基本选择器:
$("div") $(".mini") $("#btnSubmit")
-层次选择器:
$(" div span") :选取div 中所有后代 span 元素。
$("div > span") :选取div 下子 span
$(".one + div"): .one 的下一个 div 等同于$(".one").next();
$("#btnxx ~ div"):id 为btnxx 后所有兄弟 div 等同于$("#btnxx").nextAll();
$("#btnxx").sibling(); 所有前后兄弟;
js中类似方法:
-过滤选择器:
子类:
基本选择器: :first :last :not () :even :odd :eq(index) :gt(index) :lt(index) :header
内容过滤器::contails(text) :empty :has(p) :parent
可见过滤器 :hidder :visible
$('div:hidden').show(5000).css('background ','blue');//方法链
属性过滤器:$('div[id]') $('div[title='test']') …… != ^= $= [][]
子元素过滤:$("div.one :nth-child(2)") $("div.one :first") $("div.one :last-child") $("div.one :only-child")
表单对象属性过滤: :enable :disable :selected
表单过滤::text :password :radio
alert($('#form1 :imput').length); 15
alert($('#form1 input')); 12
-表单选择器:
v:
<a><b>google<b></a>
.html();//返回所有标签里内容。 <b>google<b>
.text();//不返回标签。
v:<select multiple> 多选
$("#form1 input:enabled").val("hello word");//val 赋值
$("#form1 input:gt(2):enabled").val("hello word");//val 赋值
$('select:first').each(fucntion())
---
v:Html Dom 常见操作。
查:
attr("",""); 写 attr("");读
增:
js:
var input= document.createElement("input"); //参数是创建的标签名
input.setAttribute("type","text");// input.type = "text";
document.getElementById("div").appendChild(input);
jquery:
append();//子元素
appendTo();// 颠倒 append();子元素
prepend();//prependTo();// 子元素
after();//兄弟元素 insertAfter(); $("ul li:eq(2)").insertAfter("ul li:")
before();//insertBefore(); 相反 兄弟元素
删:.remove();
替换:.replaceWith(); .replaceAll();
复制:
$("ul li").clik(function(){$(this).clone(true/或不填).apendTo("ul")});
包裹:.wrap();.wrapInner();
var $v = $("p"); 命名 变量有$ 表示是jquery对象。
属性操作:removeAttr(); .addClass()//附加样式 并集; .removeClass()//移除,可指定参数;.toggleClass("another")//两种状态切换; .hasClass(""); is
Event处理
1.js事件的冒泡处理机制。
v:事件绑定
$('span').bind("click",function(event){});//span.onclick = function;
v:去除绑定
unbind(“click”,functionName);//参数选择器。
v:
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");});
v:
.one() //执行一次后失效。
event.stopPropagation();//停止事件的传播(冒泡)。
v:
.trigger("click");//模拟用户操作。
event.preventDefualt();
<input type="submit" />
click:如果为空 停止提交。//return false阻止事件提交和传播。
v:加载时机
js.onLoad()//页面结构,外部文件图片,css全部好了之后才触发。
jquery.read();//页面结构好了就ok。
v:动画
hide(); show(); facadIn(); faceOut(); slied……();
.animate({left:"500px"},3000,function(){});// 名值对 需要距离500px ; +=500px //可以每次都移
v:
.css("opacity","0.5");//设置不透明度
v:.animate().animate().css();//遗憾的不是最后调;可以使用回调函数。
v:json
MIME Media Type: 服务器设置报文头。
text/html
application/json
text/xml
v: json 解码,编码 器。。。。
v:json 是 ajax 的x
v:
$.ajax({
type:"POST",
url:"MyServlet",
dateType:"html",//默认html , 也可设为xml,json
success:function(returnedData){
}
})
简化:$.post("XMLServlet",{//传递数据},function(returnedData,status){});
v:
servlet ajax 返回xml给客户端,注意设置
resp.setContentType("text/xml;charset=utf-8");
禁用浏览器缓存:resp.setHeader("pragma","no-cache"); resp.setHeader("cache-control","no-cache");
OutputFormat \ XMLWriter 设置xml输出格式 如 utf-8.
v: xml 对象转jquery 对象
$(returnedData) .find("id").text();//直接找标签
v:
resp.setContentType("application/json;charset=utf-8");
v:google 提供图片,ajax接口 ;//flickr。