jquery一些操作备忘
1.jquery加载json格式返回的图片，json格式如下：
{
"products": [
{
"name": "Levis Blue Denim",
"imgPath": "images/prods/levisbluedemin01.jpg"
},
{
"name": "Pepe Black Jeans",
"imgPath": "images/prods/pepeblackjeans01.jpg"
},
{
"name": "Pepe Blue Jeans",
"imgPath": "images/prods/pepebluejeans01.jpg"
}
]
}
$(document).ready(function () {
var jsonURL = "productList.json";
$.getJSON(jsonURL, function (json)
{
var imgList= "";
$.each(json.products, function () {
imgList += '<li><img src= "' + this.imgPath + '"></li>';
});
$('#dvProdList').append(imgList);
});
});
2.Disable odd checkbox of Checkbox list using jQuery
<b>1st Checkbox List: </b> <br/> <input type="checkbox" name="tech" value="jQuery" />jQuery <br/> <input type="checkbox" name="tech" value="JavaScript" />JavaScript <br/> <input type="checkbox" name="tech" value="Prototype" />Prototype <br/> <input type="checkbox" name="tech" value="Dojo" />Dojo <br/> <input type="checkbox" name="tech" value="Mootools" />Mootools <br/> <br/> <b>2nd Checkbox List: </b> <br/> <input type="checkbox" name="hobbies" value="Sports" />Sports <br/> <input type="checkbox" name="hobbies" value="Racing" />Racing <br/> <input type="checkbox" name="hobbies" value="Singing" />Singing <br/> <input type="checkbox" name="hobbies" value="Writing" />Writing <br/> <input type="checkbox" name="hobbies" value="Travelling" />Travelling <br/> <input type="checkbox" name="hobbies" value="Cooking" />Cooking <br/>
$(document).ready(function () {
$("input[name='tech']").filter(':even').attr('checked',true);
$("input[name='hobbies']").filter(':odd').attr('disabled', true);
});
</script>
2的偶数项不能勾选。
3.限制勾选的长度，比如下面的最多选择两项：
<body>
<b>Select Maximum 2 technologies:</b>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input[name='tech']").change(function () {
var maxAllowed = 2;
var cnt = $("input[name='tech']:checked").length;
if (cnt > maxAllowed) {
$(this).attr("checked", false);
alert('You can select maximum ' + maxAllowed + ' technologies!!');
}
});
});
</script>
<br/>
<br/>
<input type="checkbox" name="tech" value="jQuery" /> jQuery
<br/>
<input type="checkbox" name="tech" value="JavaScript" /> JavaScript
<br/>
<input type="checkbox" name="tech" value="Prototype" /> Prototype
<br/>
<input type="checkbox" name="tech" value="Dojo" /> Dojo
<br/>
<input type="checkbox" name="tech" value="Mootools" /> Mootools
<br/>
</body>
4.让为空的td高亮显示
<table id="gdRows" style="color:Black;background-color:LightGoldenrodYellow;border-color:Tan;border-width:1px;border-style:solid;font-family:Arial;font-size:Small;width:80%;border-collapse:collapse;"> <tr align="left" style="background-color:Tan;font-weight:bold;"> <th scope="col">ID</th> <th scope="col">Product Name</th> <th scope="col">Quantity</th> <th scope="col">Price</th> </tr> <tr align="left"> <td>1</td> <td>Mouse</td> <td>10</td> <td></td> </tr> <tr align="left"> <td>2</td> <td>Speaker</td> <td>15</td> <td>990</td> </tr> <tr align="left"> <td>3</td> <td>Hard Drive</td> <td></td> <td>3990</td> </tr> <tr align="left"> <td>4</td> <td></td> <td>22</td> <td>399</td> </tr> <tr align="left"> <td>5</td> <td>Wireless Keyboard</td> <td>10</td> <td></td> </tr> </table>
CSS为：
body {
padding:10px;
}
td {
padding:6px;
border: 2px solid PaleGoldenrod;
}
th {
padding:10px;
font-weight:bold;
}
.highlight {
background-color:PaleGoldenrod;
}
JS代码为：
$(document).ready(function () {
$("table td").each(function () {
if ($(this).html().trim().length == 0)
$(this).addClass('highlight');
});
});
5.jQuery: Difference between eq() and get()
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$('li').get(2); $('li').eq(2);
这样都能找到节点
但是eq为JQ对象，get为DOM对象，没有CSS属性，所以不工作。
$(document).ready(function () {
$('li').eq(2).css('background-color', 'red'); //Works
$('li').get(1).css('background-color', 'red'); // Error. Object #<HTMLLIElement> has no method 'css'
});
empty和remove的区别：
$(document).ready(function () {
$("#empty").click(function () {
$("#dvChild").empty();
alert($("#dvParent").html());
});
$("#remove").click(function () {
$("#dvChild").remove();
alert($("#dvParent").html());
});
htm代码为：
<div id="dvParent"> Parent Div <div id="dvChild"> <p> children</p> </div> </div> <input type=button value="empty" id="empty" /> <input type=button value="remove" id="remove" />
点击empty
点击remove
由此可见empty移除的是子节点下的内容，而remove是移除整个节点。
