黑马程序员_Jquery

来源：互联网发布：苏州国云数据编辑：程序博客网时间：2024/04/29 18:23

---------- android培训、java培训、期待与您交流！ ----------

Jquery是继prototype之后又一个优秀的Javascrīpt框架库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+）。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可，极大的简化了JavaScript开发人员遍历HTML文档、操作Dom、处理时间、执行动画和开发Ajax的操作。Jquery被集成在了Visual Studio2010中，正是由于Jquery的优秀所以才会集成在微软自己的产品中，

Jquery库类型对比，以1.4版本为例

名称

大小

说明

jquery-1.4.1

164kb

完全无压缩版本，主要用于学习、测试、开发

jquery-1.4.1.min

70.2kb

经过了压缩，主要用于项目和产品中，可以减小服务器的数据流量

在Dom编程中只能根据id或者TagName获取Dom对象，而.Jquery拥有强大的选择器

1、ID选择器 $("#id") //选取指定id的dom的对象

2、标签选择器 $(TagName) $("div") //选取所有的div对象

3、根据样式选定元素$(".styleName") // styleName为定义的css样式的名字

4、多条件选择器$("p,div,metuStyle")把标签p、div 还有使用了metuStyle样式的元素都选出来

5、子代选择器$("div li")获得div标签下的所有li标签，包括子代中的li标签

$("div> li")获得直接在div标签中的li标签

在应用中，往往在页面加载完毕后想执行一些代码，通常我们会在body加上onload的事件，使用jquery使用一个方法就行了

$(document).ready(function(){

........

});

可以简写为

$(function(){

........

});

如：在网页加载完毕后，弹出ok

$(function(){

Alert(“OK”);

});

获得当前事件的对象，可以使用$(this)，而$(this).sibing()获得当前标签的兄弟标签，使用$(HTML代码)来创建一个dom节点

$(function () {

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("#divMain").append(link);

})

样式

增加样式addClass

切换样式有就去掉，没有就加上toggleClass

移除样式removeClass

除了这三个还可以使用css这个方法

如这段代码，可以在页面加载完毕后，分别给dom对象增加、切换样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.class1

{

background-color:Red;

}

.class2

{

font-size:50px;

}

.deng

{

filter:Gray

}

</style>

$(function () {

$("#addBtn").click(function () {

//$("#divMain").addClass("class2");

$("#divMain").toggleClass("class2");

});

</script>

</head>

<body>

</body>

可以使用map函数，对数组中的每个元素都进行处理

var arr = [2,4,6];

arr = $.map(arr, function (item) {

return item * 2;

});

for (var i = 0; i < arr.length; i++) {

alert(arr[i]);

}

</script>

另外对数组的遍历使用each函数，$.each(array,function(key,value))对数组array中的每个元素调用function函数进行处理

$.each(array,function(key,value))键值对

$.each(array,function(item))只有键

$.each(array,function())只有value

把一个JavaScript对象转换为Jquery对象

Var obj;

var jqueryObj = $(obj);

实现一个可编辑的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>可编辑的表格</title>

#td

{

border-width:1px;

border-color:Red;

border-collapse:collapse;

}

</style>

$(function () {

// $("input").css("display","none").attr("size", "6");

$("#tableMain td").click(tdClick);

function tdClick() {

var td = $(this);

var text = td.text();

td.text("");

var input = $("<input id='in' type='text' value=" + text +" />");

input.blur(function () {

td.html(input.val()).click(tdClick);

});

td.append(input);

// td.unbind("click");

//转为dom对象

var inputDom = input.get(0);

input.select();

}

});

</script>

</head>

<body>

<tbody>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

---------- android培训、java培训、期待与您交流！ ----------
详细请查看：http://edu.csdn.net/