jQuery版本哪个好

转载

网络锐评 2024-10-22 14:47:43

文章标签 jQuery版本哪个好 jquery function callback input 文章分类 jQuery 前端开发

一，找到你了！
还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：

Java代码

var someElement = $("#myId");

var someElement = $("#myId");

看起来比其他两个框架的要多了一个#，好，看看下面的用法：

Java代码

$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

$("div p");(1)
$("div.container")(2)
$("div #msg");(3)
$("table a",context);(4)

在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。

如果你熟悉CSS，Xpath，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。

二，Jquery对象？

jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：

Java代码

var a = $("#cid");(1)
var b = $("<p>hello</p>");(2)
var c = document.createElement("table"); var tb = $(c);

var a = $("#cid");(1)
var b = $("<p>hello</p>");(2)
var c = document.createElement("table"); var tb = $(c);

三，代替body标签的onload

这个惯例，也许是除了$()之外，用得最多的地方了。下面一段代码：

Java代码

$(document).ready(function(){
"hello");
});(1)
<body οnlοad="alert('hello');">（2）

$(document).ready(function(){
  alert("hello");
});(1)

<body οnlοad="alert('hello');">（2）

上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即$(document).ready(fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。

不管怎么说，这个惯例可以分离javascript与HTML。推荐使用。

四，事件机制

我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。

Java代码

$(document).ready(function(){
"#clear").click(function(){
"i am about to clear the table");
});
"form[0]").submit(validate);
});
function validate(){
//do some form validation
}

$(document).ready(function(){
  $("#clear").click(function(){
     alert("i am about to clear the table");  
   });
  $("form[0]").submit(validate);
});
function validate(){
  //do some form validation
}

五，同一函数实现set&get

Java代码

$("#msg").html();
$("#msg").html("hello");

$("#msg").html();
$("#msg").html("hello");

上面两行代码，调用了同样的函数。但结果却差别很大。

第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。

六，ajax

这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常

Java代码

$.get("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
alert(xml);
} (2)
$("#msg").ajaxStart(function(){
this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
this.html("加载完成！");
});(4)

$.get("search.do",{id:1},rend);
function rend(xml){
	alert(xml);
} (1)
$.post("search.do",{id:1},rend);
function rend(xml){
	alert(xml);
} (2)

$("#msg").ajaxStart(function(){
   this.html("正在加载。。。。");
});(3)
$("#msg").ajaxSuccess(function(){
   this.html("加载完成！");
});(4)

这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。

3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。

七，渐入淡出

Java代码 
      
   
 
  
1. $("#msg").fadeIn("fast");   
2. $("#msg").fadeOut("slow");  
 
 
$("#msg").fadeIn("fast");
	$("#msg").fadeOut("slow"); 
 
 没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。 
 
 八，plugin 
 
 这也是一个插件的时代。 
 
 jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。 
 

九、HTML元素操作
 //遍历option和添加、移除option
 function changeShipMethod(shipping){
  var len = $("select[@name=ISHIPTYPE] option").length
  if(shipping.value != "CA"){
   $("select[@name=ISHIPTYPE] option").each(function(){
    if($(this).val() == 111){
     $(this).remove();
    }
   });
  }else{
   $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
  }
 } 
 //取得下拉选单的选取值 $('#testSelect option:selected').text();
 或$("#testSelect").find('option:selected').text();
 或$("#testSelect").val();
 //
 记性不好的可以收藏下：
 1,下拉框: var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
 var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值
 var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
 $("#select").empty();//清空下拉框//$("#select").html('');
 $("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option 稍微解释一下:
 1.select[@name='country'] option[@selected] 表示具有name 属性，
 并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；
 可以看出有@开头的就表示后面跟的是属性。 2,单选框:
 $("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)
 $("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格) 3,复选框:
 $("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
 $("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
    alert($(this).val());
    }); $("#chk1").attr("checked",'');//不打勾
 $("#chk2").attr("checked",true);//打勾
 if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾 
 当然jquery的选择器是强大的. 还有很多方法. <script src="jquery-1.2.1.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">
 $(document).ready(function(){
 $("#selectTest").change(function()
 {
        //alert("Hello");
        //alert($("#selectTest").attr("name"));
        //$("a").attr("href","xx.html");
        //window.location.href="xx.html";
        //alert($("#selectTest").val());
        alert($("#selectTest option[@selected]").text());
        $("#selectTest").attr("value", "2"); });
 });
 </script> 
 <a href="#">aaass</a> <!--下拉框-->
 <select id="selectTest" name="selectTest">
 <option value="1">11</option>
 <option value="2">22</option>
 <option value="3">33</option>
 <option value="4">44</option>
 <option value="5">55</option>
 <option value="6">66</option>
 </select>
 jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值
 var item = $('input[@name=items][@checked]').val();
 获取select被选中项的文本
 var item = $("select[@name=items] option[@selected]").text();
 select下拉框的第二个元素为当前选中值
 $('#select_id')[0].selectedIndex = 1;
 radio单选组的第二个元素为当前选中值
 $('input[@name=items]').get(1).checked = true;
 获取值：
 文本框，文本区域：$("#txt").attr("value")；
 多选框checkbox：$("#checkbox_id").attr("value")；
 单选组radio： $("input[@type=radio][@checked]").val();
 下拉框select： $('#sel').val();
 控制表单元素：
 文本框，文本区域：$("#txt").attr("value",'');//清空内容
                 $("#txt").attr("value",'11');//填充内容
 多选框checkbox： $("#chk1").attr("checked",'');//不打勾
                 $("#chk2").attr("checked",true);//打勾
                 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
 单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
 下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
             $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option
             $("#sel").empty()；//清空下拉框 获取一组radio被选中项的值
 var item = $('input[@name=items][@checked]').val();
 获取select被选中项的文本
 var item = $("select[@name=items] option[@selected]").text();
 select下拉框的第二个元素为当前选中值
 $('#select_id')[0].selectedIndex = 1;
 radio单选组的第二个元素为当前选中值
 $('input[@name=items]').get(1).checked = true;
 获取值：
 文本框，文本区域：$("#txt").attr("value")；
 多选框checkbox：$("#checkbox_id").attr("value")；
 单选组radio： $("input[@type=radio][@checked]").val();
 下拉框select： $('#sel').val();
 控制表单元素：
 文本框，文本区域：$("#txt").attr("value",'');//清空内容
 $("#txt").attr("value",'11');//填充内容
 多选框checkbox： $("#chk1").attr("checked",'');//不打勾
 $("#chk2").attr("checked",true);//打勾
 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
 单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
 下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
 $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
 $("#sel").empty()；//清空下拉框

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。