jquery学习小结1
jquery 小结学习1
1 闭包
javascript中的闭包，实际上就是函数内部可以直接读取外部的全局变量
比如：
var n="test";
function f1()
{
alert(n);
}
f1() //输出test
但在函数外部无法访问函数内部的变量，比如
function f1()
{
var n="test";
}
alert(n);//error
有时需要得到函数内部的变量，则要通过函数中的函数去实现
function f1()
{
var n="test";
function f2()
{
alert(n); //输出test
}
}
f2可以访问F1中的内部变量，但F2中的内部变量对F1不可见。所以可以写成如下形式，以在F1的外部
得到其值
function f1()
{
var n="test";
function f2()
{
alert(n); //输出test
}
return f2;
}
var result=f1();
result();//输出test
这个时候f2称为F1的闭包
2 jquery中的加载：
$(document).ready( function() { })跟window.onload的区别。其中$(document).ready在框架加载
完毕后就可以使用，而window.onload必须是所有的页面加载完成后才能用。
$(document).ready( function() { })等价于 $(function() { } )
3 jquery中的获取元素小结：
1） 通过标签名改变格式
<span>span标签的颜色变为红色</span>
$(function(){
$("span").css("color","red");
});
2)通过id选择器
<div id="id_name">标签id为id_name，变红色</div>
$(function(){
$("#id_name").css("color","red");
});
3） 通过类名获取元素
<div name="" disabled="disabled"/><label>订单所有者</label><input type = "text"/>
<li><input type = "checkbox" name="category" value="红"/><label>红</label>
<input type = "checkbox" name="category" value="黄"/><label>黄</label>
<input type = "checkbox" name="category" value="蓝"/><label>蓝</label>
<input type = "checkbox" name="category" value="紫"/><label>紫</label>
<input type = "checkbox" name="category" value="白"/><label>白</label></li>
<li><select multiple= "multiple " >
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select/></li>
</form>
<div id="msg">
<p id="option">
</div>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("input:text:enabled").val("能输入");
$("input:text:disabled").val("不能输入");
(function checkboxclick(){
$(":checkbox").unbind("click",checkboxclick);
var val='';
$(":checkbox:checked").each(function(){
val += $(this).val()+',';
});
$("#category").html("选择的数据："+val);
$(":checkbox").click(checkboxclick);
})();
$("select").change(function(){
var txt='';
$("select option:selected").each(function(){
txt += $(this).text() + ',';
});
$("#option").html("选择的选项是："+txt);
}).trigger("change");
});
</script>
这里也演示了checkbox和option list中的事件操作用法了
9
获取指定元素一致的元素
$('p').filter('.center');//获取类属性名为center的标签元素
10 获取指定范围的元素
//设置4到6标签的背景色成黄色。
$(function(){
$("p").slice(4,7).css("backgroundColor","yellow");
});
11 获取当前元素的前一个元素，后一个元素，父元素
$(function(){
$("p").next('.yes').css('backgroundColor','yellow');
});
前一个元素：
$(function(){
$("p").prev('.yes').css('backgroundColor','yellow');
});
父元素：
$(function(){
$("p").parent().css('backgroundColor','yellow');
});
子元素：
<div id="content">
0号
1号
3号
4号
5号
6号
7号
<div>
</body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#content").children(".yes").css('backgroundColor','yellow');
});
12 在元素的不同位置添加元素
1）在元素内部添加元素
$(function(){
$("#content").append("追加的新文字串。");
});
2） $(a).append(b)，为在A元素后添加B，$(a).appendTo(b),则表示将A添加到B后
3）在元素的开始位置加内容
$("p").prepend("<span>追加的新字符串。</span><br/>");
$(a).prepend(b)，为在A元素后添加B，$(a).prependTo(b),则表示将A添加到B后
4) 在元素后追加兄弟元素，比如
在此标签的后面追加内容。
同样也在此标签的后面追加内容。
$(function(){
$("p").after("<span>追加的新字符串。</span>");
});
则在所有的元素后都会添加字符串，相反，也有before
5) wrap
<span>将span标签包含进div标签中。</span><br/>
$("span").wrap("<div><p>
</div>");//将<span>标签包含到<div>
</div>中去
6）替换元素
$(a).replaceWith(B) 用B元素替换A元素
$(a).replaceAll(B) 将B元素替换成A元素
7） 删除元素
empty()，删除元素
<p id="emptyTest">此标签的使用empty方法进行删除。
<p type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('button#one').toggle(function(){
$('p#two').css('color','red');
},function(){
$('p#two').css('color','green');
},function(){
$('p#two').css('color','black');
});
});
</script>
15） AJAX控制
$.ajax(options)或jQuery.ajax(options)
在此放置读入的内容。
$(function(){
$.ajax({
url:'test.html',
success:function(data){
$('p#ajax').html(data);
}
});
});
16 ajaxcomplete
例子如下：
<div id="comp">在此放置ajax完成时的信息。</div>
<div id="exec">在此放置读入的内容。</div>
ajax.html:
第0号li元素。
第1号li元素。
第2号li元素。
第3号li元素。
第4号li元素。
$(function() {
$('div#comp').ajaxComplete(function()
{
$(this).html(..............)
} );
ajax通信失败
$(function(){
$('div#error').ajaxError(function(){
$(this).html("ajax送信失败...
").css('color','red');
});
$('div#exec').load('noajax.html');
});
1 楼 随风_潜入夜 2011-10-03 JQ很不错，学过一些。楼主也不错谢谢分享~！
