zoukankan      html  css  js  c++  java
  • jquery常用方法

    1.Window.onload 的JQuery方法
    $(document).ready(function(){
           //The Code!
    })
    可以简写为:
    $(function(){
           //The Code!
    })
    2.添加和去除Css类
    $(function(){
           $(“a.alink”).mouseover(function(){
    this.addClass(“over”); //添加样式
           }).mouseout(function(){
                  this.removeClass(“over”); //去除样式
    })
    })
    3.动态切换样式
    $funciotn(){
           $(a.alink).click(function(){
                  This.toggleClass(“highline”); //动态切换,当有时去除,当没有时添加
    })
    }
    4.给表格的偶数行添加样式
    $(".mytable tr:even").addClass("tr1");
    5.在选中元素上添加内容
    如:$("p ").wrap(“<div class=’aa’></div >”);
    原代码:<p>测试</p>
    运行后效果: <div class=’aa’><p>测试</p></div >
    6.直接获取、编辑内容
    var sString = $(“p:frist”).text(); //获取第一个P标签的文本值
    $(“p:last”).html(sString); //把值赋给最后一个P标签,以Html形式赋给,也就是说可以包含Html标签
    7.页面元素有克隆
    $(“img.eq(1)”).clone().appendTo($(“p”)); //将第一个图片克隆到所有的P标签中
    8.事件的监听
    $(“img”)
    .bind (“click”,fnMyfun1=function(){ //添加事件1
           $(“#show”).append(“事件1”); //在id为show的标签中添加文本
    })
    .bind (“click”,fnMyfun2=function(){//添加事件2
           $(“#show”).append(“事件2”);
    })
    .bind (“click”,fnMyfun3=function(){//添加事件3
           $(“#show”).append(“事件3”);
    }) //可以同时添加多个事件
    9.移除监听的事件
    $(“input(type=button)”).click(function(){
           $(“img”).unbind(“click”,” fnMyfun1”); //移除事件监听fnMyfun1
    })
    10.JQuery制作动画与特效――元素的显示与隐藏效果
    $(“img”).hide();
    $(“img”).hide(3000); //设置渐隐的时间,单位毫秒
    $(“img”).show ();
    $(“img”).show (3000);
    还有更多特效如:fadeIn() fadeout() slideUp() slideDown()
    11.JQuery的功能虑数
    ·浏览器的检测
    用$.browser方法
    $.browser.verson //获取浏览器版本号
    function detect(){
           if($.browser.msie)
                  return “IE”;
           if($.browser.mozilla)
                  return “Mozilla”;
           if($.browser.safari)
                  return “Safari”;
           if($.browser.opera)
                  return “Opera”;
    }
    12.盒子模型类型
    $.boxModel 如果是True,则是标准W3C,False则是其他。
    13. $.each遍历
    var aArray = [“sdf”,”dasd”,”dsa”]; //数组
    $.each(aArray,function(iNum,value){
           document.write(“序号:”+iNum+”  值:”+value);
    });
    var oObj = {one:1,two:2,three:3};
    $.each(aArray,function(property,value){
           document.write(“属性:”+ property +”  值:”+value);
    });
    14.数据过虑
    var aArray = [1,3,5,6,7,8,6,8];
    var aResulr = $.grep(aArray,function(){
           return value > 4; //返回大于4的值,过虑了小于等于4的值
    });
    15.数组的转换
    var aArray = [“a”,”b”,”c”,”d”];
    aArray = $.map(aArray,function(value,index){
           return (value.toUpperCase()+index);
    });
    16.JQuery中使用Ajax
    $(“#display”).load(“aaa.aspx”); //display为接收数据的容器
    $.get(url,[data],[callback]) //get方式
    $.post(url,[data],[callback],[type]) //post方式
    例:
    function createQuerystring()
    {
           var username = encodeURI($(“#userName”).val); //userName为文本框的id
           var password = encodeURI($(“#passWord”).val);
           var queryString = {username:username, password:passWord};
           return queryString;
    }
    $.get(“aa.aspx”, createQuerystring(), function(data){
           $(“#serverResponse”).html(decodeURI(data));
    });
    Ajax 细节设置
    $.ajax({
           type : ”GET”,
           url : “aa.aspx”,
           data : createQuerystring(),
           success : function(data){
                  $(“#serverResponse”).html(decodeURI(data));
    }
    })
    Ajax全局设置
    $.ajaxSetup({
           url : “aa.aspx”,
           data : createQuerystring(),
           success : function(data){
                  $(“#serverResponse”).html(decodeURI(data));
    }
    }) //这个设置后,就成为了Ajax的默认设置
  • 相关阅读:
    后端分页但是前端想要把所有数据取出来
    css做多列瀑布流
    css制作骰子
    css球体
    css摩天轮
    css圆圈慢慢放大
    01-布局扩展-自适应两栏布局
    Zigbee 知识简介
    华为OD 嵌入式方向面经
    算法练习题 2 合唱队
  • 原文地址:https://www.cnblogs.com/tianxuwei/p/10478737.html
Copyright © 2011-2022 走看看