锋利的jQuery读书随笔

Posted 2022-10-13 katu

代码规范：
var $variable = jQuery对象；
var variable = DOM对象；

jQuery对象无法使用DOM对象的任何方法，同样DOM对象也无法使用jQuery对象的任何方法。
下面两个代码是等效的，获取id为foo的元素的html代码。
document.grtElementById("foo").innerHTML;
$("#foo").html();

DOM对象和Jquery对象的转换
JQuery->DOM
1) var $cr = $("#cr");
var cr = $cr[0];
alert(cr.checked); 检测这个checkbox是否被选中了
2) var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked); 检测这个checkbox是否被选中了
DOM->JQuery
var cr = document.getElementById("cr");
var $cr = $(cr);

<input type="checkbox" id="cr" /><label for="cr">我已经阅读了上面制度. </label>

用DOM方式来判断复选框是否被选中
$(document).ready(function()
var $cr = $("$cr");
var cr = $cr[0];
$cr.click(function)
if(cr.checked)
alert("感谢你的支持！你可以继续操作");


)
用JQuery方式来判断复选框是否被选中
$(document).ready(function)()
var $cr = $("#cr");
$cr.click(function()
if ($cr.is(":checked"))
alert("感谢你的支持！你可以继续操作");

)

JQuery.noConflict()函数可以将变量的控制权移交给其他javascript库
JQuery.noConflict()函数也可以自定义一个快捷方式
……省略其他代码
var $j = JQuery.noConflict();
$j(function()
………
)

传统的js用getElementById()和getElemnetByTagName()函数获取标签必须要进行判断

<div>test</div>
<script type="text/javascript">
if (decoment.getElementById("tt")
document.getElementById("tt").style.color="red";

</script>

<div>test</div>
<script type="text/javascript">
$(‘#tt‘).css("color","red"); 这里无需判断$(‘#tt‘)是否存在
</script>

$(‘#tt‘)获取的永远是对象，即使页面上没有这个元素，因此当要用jQuery检查某个元素在网页上是否存在是，不要用以下代码：
if ($(‘#tt‘)) //do something
而应该根据获取到的元素的长度来判断，代码如下
if ($(‘#tt‘).length>0) //do something
或者转化成dom对象来判断，代码如下：
if ($(‘#tt‘)[0]) //do something

给网页中的所有<p>元素添加onclick事件
js代码如下：
var items = document.getElementByTagName("p");
for(i=0;i<items.length;i++)
items[i].onclick = function()
//do something

对多选框进行操作，输出选中的多选框的个数
var btn = document.getElementByName("btn");
tbn.onclick = function ()
var arrays = new Array();
var items = document.getElementByName("check");

for(i=0 ; i<items.length;i++)
if(items[i].checked)
arrays.push(items[i].value);


alert("选中的个数为"+arrays.length);