jquery常用语句总结

最新推荐文章于 2024-10-01 20:12:28 发布

weixin_33860737

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量68

点赞数 1

文章标签： javascript ViewUI

一.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);