jquery 常见功能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;


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值