zoukankan      html  css  js  c++  java
  • jquery常用语句总结

    一.jquery中text val html attr的使用区别

    html和innerHTMl是一样的,可以获得和设置指定元素如<p>中的html标签和文本
    如:
    设置值:

    $("p").html("<span style='font-size:13px;color:red'>HTML标签+文本</span>"); 

    获得值:

    $("p").html(); 

    text和innerText是一样的,可以获得和设置文本
    如:
    设置值:

    $("p").text("HTML标签+文本"); 

    获得值:

    $("p").text(); 

    val和value在使用上有一定的区别,通常在获取和设置文本框的值时,推荐使用val,比如文本框
    如:

    $("input").val("这是设置文本框的值");
    $("input").val();//获取文本框的值
    
    
    //attr用来设置元素的各种属性,比如
    $("input").attr("value","admin");//给value属性赋值,value通常是预定义值
    $("input").attr("disable","true");//禁用文本框
     

    注意value 属性为 input 元素设定值。

    对于不同的输入类型,value 属性的用法也不同:

    • type="button", "reset", "submit" - 定义按钮上的显示的文本
    • type="text", "password", "hidden" - 定义输入字段的初始值,对于设置或获取文本框上的动态值,请使用$(xxx).val()和$(xxx).val(xxxx)方法
    • type="checkbox", "radio", "image" - 定义与输入相关联的值

    注意<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

    同时需要说明的是value 属性无法与 <input type="file"> 一同使用。

     二.获取jquery对象的标签类型

        //jquery 对象

       $("#"+控件id)[0] 

    //查看控件类型
     $("#"+控件id)[0].type

    实例1:
    < select id="ddl" >
      < option >
    1< /option >
       < option >2< /option >
    < / select>

    $("#ddl")[0].type;// select-one

    实例2:
    < input type="text" id="txt" />
    $("#txt")[0].type;//text

    三.jQuery插件开发

    jQuery为开发插件提拱了两个方法,分别是:

    
    

    jQuery.fn.extend(object);  给jQuery对象添加方法。
    jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

    
    

    1 jQuery.fn.extend(object);

    
    

    fn 是什么东西呢。查看jQuery代码,就不难发现。

    
    

    jQuery.fn = jQuery.prototype = {  

    
    

    init: function( selector, context ) {//....   

    
    

    //......  

    
    

    };   

    
    

    原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

    
    

    jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

    
    

    比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

    
    

    $.fn.extend({        

    
    

         alertWhileClick:function(){       

    
    

             $(this).click(function(){      

    
    

                  alert($(this).val());       

              });       
          }       
    });   
    
    

    $("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

    
    

    $("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

    
    

    2 jQuery.extend(object); 

    
    

    为jQuery类添加添加类方法,可以理解为添加静态方法。如:

    
    

    $.extend({  

    
    

        add:function(a,b){return a+b;}  

    
    

    });  

    
    

    便为jQuery添加一个为 add的“静态方法”,之后便可以在引入jQuery的地方,使用这个方法了,如 $.add(3,4); //return 7

     四.jquery中绑定change事件方法:
    //方法1.html标签中像使用onClick()方法一样使用onchange()方法
    
    //方法2
    $("#tagId").change(function(){
    //...
    });
    
    //方法3
    $("#tagId").on("change",function(){
    //...
    });
    
    //触发change事件
    $("#tagId").trigger("change");
    
    

     五.利用jquery的selector获取标签并移除

    $("small[attr1=remote][attr2=cnNm]:first").remove();

    如上代码,small为html标签。含义为选取属性键值为attr1=remote且attr2=cnNm的所有small标签的第一个,将其remove掉。

    六.编写jquery插件实现在js脚本中获取URL中的参数,类似于后台request.getParameter("xxx")

    (function ($) {
          $.getUrlParam = function (name) {
           var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
           var r = window.location.search.substr(1).match(reg);
           if (r != null) return unescape(r[2]); return null;
          }
         })(jQuery);

    使用示例:

    var urlParam=$.getUrlParam('userName');
  • 相关阅读:
    网络协议分析-ICMP协议分析
    网络协议分析-IP协议分析
    网络协议分析-ARP协议分析
    网络协议分析-Ethernet
    Centos7 _dns服务器搭建及配置
    centos7_vsftpd-ssl/tls搭建及ftp加固
    HTTP请求的六种方式
    Winserver03-Web SSL服务搭建
    webstorage和cookie的区别
    sessionstorage和localstorage的区别
  • 原文地址:https://www.cnblogs.com/franson-2016/p/5611447.html
Copyright © 2011-2022 走看看