jquery基础知识第一讲之认识jquery

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：713 次日期：2016-07-19 15:35:43

温馨提示：小编为您整理了“jquery基础知识第一讲之认识jquery”,方便广大网友查阅！

jQuery是一个优秀的JavaScript库，它凭借简洁地语法和跨平台的兼容性，极大地简化了开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax操作。

jQuery优势：

1.轻量级

2.强大的选择器

3.出色的DOM操作的封装

4.可靠的事件处理机制

5.完善的Ajax

6.不污染顶级变量

7.出色的浏览器兼容性

8.链式操作方式

9.隐式迭代

10.行为层与结构层分离

11.丰富的插件支持

12.完善的文档

13.开源

（1）编写简单的jQuery代码:

注：$ 就是jQuery的简写形式。

$(document).ready(function () { //等待DOM元素加载完毕.（可能DOM元素关联的文件没有加载完）

alert("Hello World!"); //弹出一个框

});

　　　 $(document).ready(function () { //可以同时编写多个

alert("Hello again!");

});

$(function () { //简写形式

alert("Hello jQuery!");

});

</script>

（2）jQuery的代码风格

注：链式操作。

1、对同一个对象不超过3次操作的，可以写成一行。　　　　

2、对于同一个对象操作较多的，建议每行写一个操作。

3、对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。

4、对于多个对象的较多操作，可以结合2,3条。

添加必要的注释。

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

<html>

<head>

#menu {

width:300px;

}

.has_children{

background : #555;

color :#fff;

cursor:pointer;

}

.highlight{

color : #fff;

background : green;

}

div{

padding:0;

}

div a{

background : #888;

display : none;

float:left;

width:300px;

}

</style>

//等待dom元素加载完毕.

$(document).ready(function(){

$(".has_children").click(function(){

$(this).addClass("highlight") //为当前元素增加highlight类

.children("a").show().end() //将子节点的a元素显示出来并重新定位到上次操作的元素

.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类

.children("a").hide(); //将兄弟元素下的a元素隐藏

});

</script>

</head>

<body>

<span>第1章-认识jQuery</span>

<a>1.1-JavaScript和JavaScript库</a>

<a>1.2-加入jQuery</a>

<a>1.3-编写简单jQuery代码</a>

<a>1.4-jQuery对象和DOM对象</a>

<a>1.5-解决jQuery和其它库的冲突</a>

<a>1.6-jQuery开发工具和插件</a>

</div>

<span>第2章-jQuery选择器</span>

<a>2.1-jQuery选择器是什么</a>

<a>2.2-jQuery选择器的优势</a>

<a>2.3-jQuery选择器</a>

<a>2.4-应用jQuery改写示例</a>

<a>2.5-选择器中的一些注意事项</a>

<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>

<a>2.7-还有其它选择器么？</a>

</div>

<span>第3章-jQuery中的DOM操作</span>

<a>3.1-DOM操作的分类</a>

<a>3.2-jQuery中的DOM操作</a>

<a>3.3-案例研究——某网站超链接和图片提示效果</a>

</div>

</body>

</html>

（3）DOM对象与jQuery对象

DOM(Document Object Model,文档对象模型)，每一个DOM都可以表示成一棵树。JavaScript中的getElementById或者getElementByTagName来获取元素节点，这样的DOM元素就是DOM对象。

jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，可以使用jQuery中的方法，但不能使用DOM对象的方法。

注：jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

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

<head>

//等待dom元素加载完毕.

$(document).ready(function () {

var domObj = document.getElementsByTagName("h3")[0]; // Dom对象

var $jQueryObj = $(domObj); //jQuery对象

alert("DOM对象：" + domObj.innerHTML);

alert("jQuery对象：" + $jQueryObj.html());

});

</script>

</head>

<body>

<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>

<ul>

</ul>

</body>

</html>

DOM对象与jQuery对象可以相互转换，案例如下：

1.DOM对象方式

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

<html>

<head>

//等待dom元素加载完毕.

$(document).ready(function () {

var $cr = $("#cr"); //jQuery对象

var cr = $cr.get(0); //DOM对象获取 2种方式 $cr[0] 或者 $cr.get(0)

$cr.click(function () {

if (cr.checked) { //DOM方式判断

alert("感谢你的支持!你可以继续操作!");

}

})

});

</script>

</head>

<body>

<label for="cr">我已经阅读了上面制度.</label>

</body>

</html>

2.jQuery对象方式

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

<html>

<head>

//等待dom元素加载完毕.

$(document).ready(function () {

　　　　　　 var cr = document.getElementById("cr"); //DOM对象

var $cr = $(cr); //jQuery对象

$cr.click(function () {

if ($cr.is(":checked")) { //jQuery方式判断

alert("感谢你的支持!你可以继续操作！");

}

})

});

</script>

</head>

<body>

<label for="cr">我已经阅读了上面制度.</label>

</body>

</html>

以上就是关于jquery学习的第一课，希望大家继续关注。

上一篇：javascript 继承学习心得总结

下一篇：Angularjs 滚动加载更多数据

手机网站地址：jquery基础知识第一讲之认识jquery

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！