Unknown reason, IME for Chinese input does not work on PC start this morning. In light of aching to complete this blog. My shit English instead of Chinese input.
As shown by subject, this blog pins at the one advantage of Succinct jQuery comparing with DOM to spread out. Mainly apply the ‘selector’ of jQuery.
- Straightly target element, property or content to be operated .
- Time Saving on coding.
(off the topic, one of my friends advises to put more theory of technology for blog that means a lot more on meaningfulness and attractiveness. Yeah, :) :(, hopefully, I can be capable of accomplishing as so some day later. – at present, chen qie shi zai zuo bu dao. The door of technology at which that locates i am searching).
I plan to have two snippets of codes below: each one of two will be written in JavaScript -DOM against its jQuery.
First snippet
HTML code as below.
<html>
<head>
<!--import jQuery lib-->
<script src='../jQuery.js'></script>
<script src='../stripeColor.js'></script>
</head>
<body>
<table id=tbl>
<tr><td>the first line</td><td>the first line</td></tr>
<tr><td>the second line</td><td>the second line</td></tr>
<tr><td>the third line</td><td>the third line</td></tr>
</table>
</body>
</html>//JavaScript - DOM,
//Stripe color for every second line in a table,
<script type="text/javascript">
function stripeColor(){
var tbls = document.getElementById('tbl')[0];
var trs=tbls.getElementsByTagName('tr');
for(var i=0; i<trs.length; i++){
if(i%2==0){
trs[i].style.backgroundColor = '#345';
}
}
}
stripeColor();
</script>
//above lines of codes which change the background color //of every second row. let's check below jQuery code to //comparing with its succinct traits.//the following code will be written by jQuery to make
// the same result.
$(function(){
$('#tbl > tr:even').css(
'background','#345'
);
})
//as of now, jQuery its succinct trait is self-evident.Now have second snippet to experience
//HTML Code
<html>
<head>
<script src='../jquery.js'></script>
<script src='../'></script>
</head>
<body>
<input type='checkbox' value='1' name='check' checked='checked'/>
<input type='checkbox' value='2' name='check' />
<input type='checkbox' value='3' name='check' checked='checked'/>
<input type='button' value='The number of selected checkbox' id='btn'/>
</body>
</html>//JavaScript - DOM code
<script type=text/javascript>
function checkboxCount(){
var btn = document.getElementById('btn');
btn.onclick=function(){
var arrays=[];
var checks=document.getElementsByName('check');
for (var i=0; i<checks.length; i++){
if (checks[i].checked){
arrays.push(checks[i]).value);
}
}
alert('The number of selected checkbox: ' + arrays.length);
}
}
checkboxCount();
</script>.//jQuery Code
$(function(){
$('#btn').click(
function(){
var checks=$(input[name='check']:checked);
alert('The number of selected checkbox: '+ checks.length);
}
);
})
// just one line to target all <input> tags
// if 'checked' by using selector of jQuery.Through two examples testified the succinct trait of jQuery comparing with JavaScript - DOM.
I am glad to hear any comments, Please.
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
