添加事件命名空间,便于管理
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("button").click(function(){
$("div").unbind(".plugin");
});
$("button").click(function(){
$("div").trigger("click!");
});
感叹号 的意思是不包含命名空间的
hide()隐含着三个属性 高度 ,宽度,不透明度 最后设置display:nonoe
fadeIn() 和 fadeOut() 只改变元素的不透明度
slideUp() 和 slideDown() 只会改变元素的高度
jquery 中的任何动画效果,都可以指定为 这几个参数 slow normal fast
动画队列
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
等执行完第一行 才执行第二行
$("$panel").css("opacity",'0.5')//设置不透明度
is () 判断元素是否处于动画状态
if(!$(element).is(":animated"))
{
}
toggle()可以切换元素的可见状态 和 hide() show() 效果一样
slideToggle() 通过高度变化来切换匹配元素的可见性。和 slidedown slideUp() 效果一样
fadeTo ( ,) 把元素的不透明度以渐进方式调整到指定的值。
其实上面这些方法 都是通过 animate() 这个方法来定义的。
列子: 用animate()来代替show()
$("p").animate({height:'show',width:'show',opacity:'show'},400);
$("p").animate({opacity:'0.6'},400) 用来代替 fadeTo()
这些动画师animate()方法的一种内置了特定样式属性的简写形式。在animate()方法中,这些特定样式的属性值
可以为show hide toggle ,也可以是自定义数字(值)。 以上就是。
动画队列中 要注意 css()方法的使用 它不是排队执行的,而是只要有css() 他就会赶在动画方法前面执
行
input:focus,textarea:focus{border:1px solid #foo;background:#fcc}
remove();
$("#add").click(function(){
var $optoins = $('#select1 option:selected');//获取选中的选项
$options.appendTo('#selecte2'); //追加给对方
});
删除和追加这两个步 可以用appendTo()方法直接完成。
$(function(){
$("#id").click(function(){
$.ajax({
url:'test.html',
type:'post',
data:'要传的参数', //格式为 "name=jone&age=19"
success:function(msg){//这里的msg是从 url那边传回来的值
alert(msg);
}
});
});
});
$('div ul li')index(this) 搜索匹配的元素 返回相应元素的索引值
<div class='tab'>
<div class='tab_menu'>
<ul>
<li class='selected'>事实</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class='tab_box'>
<div>事实</div>
<div class='hide'>体育</div>
<div class='hide'>娱乐</div>
</div>
</div>
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected")//当前li元素高度
.siblings().removeClass("selected");
var index = $div_li.index(this);//获取当前单击的li元素在全部li元素的索引
$("div.tab_box >div")//选取子节点
.eq(index).show()//显示li元素对应的div元素
.siblings().hide();//隐藏其他几个同辈的div元素
});
网页皮肤换色
$(function(){
var $li = $("$skin_li");
$li.click(function(){
$('#'+this.id).addClass('selected')
.siblings().removeClass('selected');
$('#cssfile').attr('href','css/'+(this.id)+'css');//设置不同皮肤
$.cookie('mycssSkin',this.id,{path:'/',expires:10});
});
var cookie_skin = $.cookie('mycssSkin');
if (cookie_skin)
{
$('#'+cookie_skin).addClass('selected')
.siblings().removeClass('selected');
$('#cssfile').attr('href','css/'+cookie_skin+'.css');
$.cookie('myCssSkin',cookie_skin,{path:'/',expires:10});
}
});
ajax 原理
window.ActiveXObject //ie 5 6 是以ActiveXObject的方式引入xmlhttpRequest对象的
$('#send').click(function(){
$('resText').load('test.html .param(类名)',{name:'rain',age:'22'},function(){
//
});只显示此类名的数据
});
load() 用来从 web服务器上获取静态的数据文件。
$.get() $.post 是jquery中的全局函数,而在此之前的jquery方法都是对jquery对象进行操作的。
$.get $.post 只有成功时才能执行回调函数, 这点与load()不同
$.ajax 可以设定 beforeSend error success complete
创建元素 $(document.createElement('script')).attr('src','test.js').appendTo("head");
$.getScript() 直接加载js文件
$.getJson() 加载json文件
遍历的方法 $.each() 可以用于遍历对象和方法
$.each 不同于jquery对象的each()方法,它是一个全局函数,不操作jquery对象,而是以一个数组或者对象作
为第一个参数,以一个回调函数作为第二个参数。 回调函数有两个参数,第一个为对象或者索引,第二个为对
应变量或内容
$.getJson('test.json',function(data){
$("#resText").empty();
var html = '';
$.each(data,function(commentindex,comment){
html += '<div class='commnet'><h6>'
+comment['username'] + ':</h6><p class="para">'
+comment['content'] + '</p></div>';
});
$('#resText').html(html);
});
serialize() serializeArray() 这个不是返回字符串,而是将DOM元素序列化后,返回json格式的数据
这两个是作用于jquery对象的 所以 $("#form1").serialize() 或者 $(':checkbox,:radio').serialize
();
只要是对象 就可以用 $.each()进行迭代
$.param() 它是serialize()方法的核心
var obj = {a:1,b:2,c:3};
var k =$.param(obj);
alert(k); //输出a1&b=2&c=3;
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("button").click(function(){
$("div").unbind(".plugin");
});
$("button").click(function(){
$("div").trigger("click!");
});
感叹号 的意思是不包含命名空间的
hide()隐含着三个属性 高度 ,宽度,不透明度 最后设置display:nonoe
fadeIn() 和 fadeOut() 只改变元素的不透明度
slideUp() 和 slideDown() 只会改变元素的高度
jquery 中的任何动画效果,都可以指定为 这几个参数 slow normal fast
动画队列
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
等执行完第一行 才执行第二行
$("$panel").css("opacity",'0.5')//设置不透明度
is () 判断元素是否处于动画状态
if(!$(element).is(":animated"))
{
}
toggle()可以切换元素的可见状态 和 hide() show() 效果一样
slideToggle() 通过高度变化来切换匹配元素的可见性。和 slidedown slideUp() 效果一样
fadeTo ( ,) 把元素的不透明度以渐进方式调整到指定的值。
其实上面这些方法 都是通过 animate() 这个方法来定义的。
列子: 用animate()来代替show()
$("p").animate({height:'show',width:'show',opacity:'show'},400);
$("p").animate({opacity:'0.6'},400) 用来代替 fadeTo()
这些动画师animate()方法的一种内置了特定样式属性的简写形式。在animate()方法中,这些特定样式的属性值
可以为show hide toggle ,也可以是自定义数字(值)。 以上就是。
动画队列中 要注意 css()方法的使用 它不是排队执行的,而是只要有css() 他就会赶在动画方法前面执
行
input:focus,textarea:focus{border:1px solid #foo;background:#fcc}
remove();
$("#add").click(function(){
var $optoins = $('#select1 option:selected');//获取选中的选项
$options.appendTo('#selecte2'); //追加给对方
});
删除和追加这两个步 可以用appendTo()方法直接完成。
$(function(){
$("#id").click(function(){
$.ajax({
url:'test.html',
type:'post',
data:'要传的参数', //格式为 "name=jone&age=19"
success:function(msg){//这里的msg是从 url那边传回来的值
alert(msg);
}
});
});
});
$('div ul li')index(this) 搜索匹配的元素 返回相应元素的索引值
<div class='tab'>
<div class='tab_menu'>
<ul>
<li class='selected'>事实</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class='tab_box'>
<div>事实</div>
<div class='hide'>体育</div>
<div class='hide'>娱乐</div>
</div>
</div>
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected")//当前li元素高度
.siblings().removeClass("selected");
var index = $div_li.index(this);//获取当前单击的li元素在全部li元素的索引
$("div.tab_box >div")//选取子节点
.eq(index).show()//显示li元素对应的div元素
.siblings().hide();//隐藏其他几个同辈的div元素
});
网页皮肤换色
$(function(){
var $li = $("$skin_li");
$li.click(function(){
$('#'+this.id).addClass('selected')
.siblings().removeClass('selected');
$('#cssfile').attr('href','css/'+(this.id)+'css');//设置不同皮肤
$.cookie('mycssSkin',this.id,{path:'/',expires:10});
});
var cookie_skin = $.cookie('mycssSkin');
if (cookie_skin)
{
$('#'+cookie_skin).addClass('selected')
.siblings().removeClass('selected');
$('#cssfile').attr('href','css/'+cookie_skin+'.css');
$.cookie('myCssSkin',cookie_skin,{path:'/',expires:10});
}
});
ajax 原理
window.ActiveXObject //ie 5 6 是以ActiveXObject的方式引入xmlhttpRequest对象的
$('#send').click(function(){
$('resText').load('test.html .param(类名)',{name:'rain',age:'22'},function(){
//
});只显示此类名的数据
});
load() 用来从 web服务器上获取静态的数据文件。
$.get() $.post 是jquery中的全局函数,而在此之前的jquery方法都是对jquery对象进行操作的。
$.get $.post 只有成功时才能执行回调函数, 这点与load()不同
$.ajax 可以设定 beforeSend error success complete
创建元素 $(document.createElement('script')).attr('src','test.js').appendTo("head");
$.getScript() 直接加载js文件
$.getJson() 加载json文件
遍历的方法 $.each() 可以用于遍历对象和方法
$.each 不同于jquery对象的each()方法,它是一个全局函数,不操作jquery对象,而是以一个数组或者对象作
为第一个参数,以一个回调函数作为第二个参数。 回调函数有两个参数,第一个为对象或者索引,第二个为对
应变量或内容
$.getJson('test.json',function(data){
$("#resText").empty();
var html = '';
$.each(data,function(commentindex,comment){
html += '<div class='commnet'><h6>'
+comment['username'] + ':</h6><p class="para">'
+comment['content'] + '</p></div>';
});
$('#resText').html(html);
});
serialize() serializeArray() 这个不是返回字符串,而是将DOM元素序列化后,返回json格式的数据
这两个是作用于jquery对象的 所以 $("#form1").serialize() 或者 $(':checkbox,:radio').serialize
();
只要是对象 就可以用 $.each()进行迭代
$.param() 它是serialize()方法的核心
var obj = {a:1,b:2,c:3};
var k =$.param(obj);
alert(k); //输出a1&b=2&c=3;