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 class="className">这个标签的类名为className，因此变为红色</div>
<div>没有定义标签的类名，不改变颜色</div>
$(function(){
$(".className").css("backgroundColor","red");
});
4） 一次性获取多个元素
比如下面将多个元素的背景设置为红色，用逗号分开
$(function(){
$("p, #id_name, .className").css("backgroundColor","red");
});
5） 根据元素的属性值获得元素
<p id="p_test1" class="class1">p标签中定义了id属性，变红色
$("p[id]").css("color","red");
6） 通过过滤器获得元素
比如获得第一个元素 :first,最后一个元素last
第0个li的文字变为红色<h3><span>第1个li</span>不变色</h3>第2个li不变色<span>第3个li不变色</span>最后一个li不变色
$(function(){
$("li:first").css("color","red");
});
此外还有li:last,li:even(偶数）,li:odd（奇数),:empty（获得空元素） :parent(获得非空元素)
7) 获得表单元素
$(function(){
$("#msg").html(
"input元素有"+$(":input").length+"个(取得所有表单元素)<br/>"+
"text属性的元素有"+$(":text").length+"个(取得text属性的元素)<br/>"+
"password属性元素有"+$(":password").length+"个(取得password属性的元素)<br/>"+
"radio元素有"+$(":radio").length+"个(取得单选按钮元素)<br/>"+
"checkbox元素有"+$(":checkbox").length+"个(取得多选按钮元素)<br/>"+
"submit或image属性元素有"+$(":submit").length+"个(取得submit属性或image属性的元素)<br/>"+
"image属性元素有"+$(":image").length+"个(取得image属性的元素)<br/>"+
"reset属性元素有"+$(":reset").length+"个(取得reset属性的元素)<br/>"+
"button属性元素有"+$(":button").length+"个(取得button属性的元素或button标签)<br/>"+
"file属性元素有"+$(":file").length+"个(取得file属性的元素)<br/>"+
"hidden属性元素有"+$("input:hidden").length+"个(取得hidden属性的表单元素)"
);
});
8） 过滤器获得表单元素
<form>
- <label>订单号码</label><input type = "text" 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 class="emptyTest">准备使用remove方法删除。
$("#emptyTest").empty();
$("p").remove(".emptyTest");
13 获取与设置属性
1） attr:设置属性，比如
$("p#two").attr("title","修改two的title属性。");
2） 删除属性值
$("p#one").removeAttr("style");
3）增加CLASS
$("p#two").addClass("redbox");
4） 删除
$("p#two").removeClass("redbox");
5） toggleClass(class),当指定类名存在，则删除，否则添加
toggleClass(class,swith),当switch表达式为真，则追加，为假，则删除
6） 设置HTML元素
<p id="one"><b>第一个</b>p标签的内容。
var val=$("p#one").html();
$("p#two").html(val);
7) 设置CSS
<p id="one">将此标签的文字变为红色
$('p#one').css('color','red');
$('p#two').css({color:'white',backgroundColor:'green'});
14 函数事件
1) bind和unbind
2) toggle(fn1,fn2,fn3) 定义元素被单击时按顺序执行定义的函数
<button id="one">提交</button>
<p id="two">文字颜色在红/绿/黑间切换。
</body>
<script src="jquery.js" 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');
});