网站地图
【www.gdgbn.com--jquery】
1. 选择器
在html里，我们可以使用网页特效选择一个html标记进行操作，比如修改html标记的属性，添加一个class属性等等。使用jquery选择一个html标记更加容易
1）通过html的id属性选择一个html标记
var id = jquery("#id3");
id.html("hahaha");
以上代码中 得到一个div 标记，并为这个标记的内容赋值hahaha，之所以得到这个标记是因为这个标记的id等于id3
2) 通过元素名称选择
var ids = jquery("div");
alert(ids);
///////////////////////
aa
bb
以上代码得到一个数组，数组中的元素是2个div标记
3) 通过元素的class属性选择元素
4) 通过* 可以选择所有的元素
5) 通过元素 子元素来选择元素
例如:
jquery("div li"); // 得到div元素下面的li子元素
jquery("div li:has(a)"); // 得到div元素下面的li子元素,and 这些子元素是有标记的子元素 ,例如:aa 只得到第一个li
jquery("div:eq(0)"); // 得到第一个div元素
jquery("div:lt(2)">; // 得到前两个div
jquery("div:last(0)"); // 得到后div
2. 去除首位空格
var s = jquery.trim("sss ");
3. window.onload = mybegin 的作用是当文档加载完成执行mybegin函数，但这句只能写一次，如果要执行多个函数，使用jquery：
jquery(document).ready(function(){});
这句还可以写成：jquery(function(){});
4. 创建元素
var se = jquery(""); // 创建了一个select元素
se.insertbfter("#id"); // 将新建的元素追加到div2元素后面
5. 得到元素的属性
$("div").attr("title");
6. 设置元素属性
$("div").attr("title", "helo");
7. 添加class属于
$("div:eq(1)").adddlass("myclass1");
为第二个div元素添加一个class="myclass1"
8. 切换class属性
$("div").toggledlass("hight");
如果div元素有class=hight属性,则删除,如果没有则添加之
9. 获得元素文本的内容
$("div").text();
10. 获得元素html内容
$("div").html();
11. 为元素添加html内容
$("div").html("......");
12. 克隆元素
$("div").clone();
得到此元素的一个副本.
$("div").clone().appendto($("p"));
将div元素的一个副本追加到p元素
13. 为元素添加事件
$("div").click(function(){});
// 为div元素添加了一个click事件,当触发该事件时,执行function函数
$("div").bind("click", function(){});
// 为div元素绑定一个click事件
$("div").bind("click", fn = function(){});
// 为div元素绑定一个click事件
$("div[@id=d]").click(function(event) {
alert(event.clientx)
});
// 为div(并且div的id="d")添加一个click事件,事件处理函数中得到鼠标坐标
14. 移除事件
$("div").unbind("click", fn); //fn为函数名
15. 显示元素
$("div").show();
$("div").show(毫秒); // 使用"毫秒"时间将div显示出来
16. 隐藏元素
$("div").hide();
$("div").hide(毫秒);
17. 元素隐藏和显示
还有:
$("div").fadeout();
$("div").fadein();
18. 幻灯片
$("div").slideup();
$("div").slidedown();
19. 浏览器检测
$.browser 下有多个属于,可以用来判断浏览器的类别
msie true表示ie
mozilla true表示mozilla系列,比如firefox
safari true表示safari
opera true表示opera
version 得到浏览器的版本
if ($.browser.mozilla)
{
....
}
20. 盒子模型
盒子模型分为w3c标准模型和ie非标准模型
我们介绍标准模型
是浏览器的区域,element是内容区域,他有width属性和height属性,padding是内容区域到tag边框的距离,称内边距,margin是element边框的浏览器边缘的距离,称外边距
判断盒子模型的类型
$.bomodel 可以判断盒子模型,true为标准w3c boxmodel
这句建议使用 $.support.bomodel 替代
21. 遍历对象
$.each(array, fn);
// 遍历array(集合),每遍历一次,执行一次fn.
$.each($.browser , fn(p,v){...});
// 遍历browser中的所有属性,fn函数的参数p表示属性名称,v表示属性值.
对数组进行过滤
$.grep(array , fn(v,index){...});
遍历array中的元素,每遍历到一个元素执行一次fn函数. fn函数的第一个参数为array中遍历到的元素,第二个元素为index, 这个fn函数必须返回true/false,如果返回true,则保留遍历到的这个元素,如果返回false则删除此元素.
例子:
var ss = $.grep([1,2,3,4] , function(o){
return o > 2;
});
alert(ss); // 打印出大于2的元素.
22. map()
我总觉得这个map函数和each一个意思,还是不理解
$.map(array , fn);
23. 异步请求
$.get(url, {data} , fn(data){...});
$.post(url, {data}, fn(data){...});
$.ajax(options);
例子:
$.ajax( {
type : "post",
url : "....",
data : {name:"11", age:"22"},
success : fn(data){}
} );
其中{data} 是json格式的数据,表示url的参数