首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 17, 2016

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

jQuery优势：

1.轻量级

2.强大的选择器

3.出色的DOM操作的封装

4.可靠的事件处理机制

5.完善的Ajax

6.不污染顶级变量

7.出色的浏览器兼容性

8.链式操作方式

9.隐式迭代

10.行为层与结构层分离

11.丰富的插件支持

12.完善的文档

13.开源

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

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

<!-- 引入 jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#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>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待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>
<div id="menu">
  <div class="has_children">
    <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>
    <a>1.7-小结</a>
  </div>
  <div class="has_children">
    <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>
    <a>2.8-小结</a>
  </div>
  <div class="has_children">
    <span>第3章-jQuery中的DOM操作</span>
    <a>3.1-DOM操作的分类</a>
    <a>3.2-jQuery中的DOM操作</a>
    <a>3.3-案例研究——某网站超链接和图片提示效果</a>
    <a>3.4-小结</a>
  </div>
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>1-4</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 引入 jQuery -->
  <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待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>
  <h3>例子</h3>
  <p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
  <ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
  </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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-2</title>
  <!-- 引入 jQuery -->
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待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>
  <input type="checkbox" id="cr" />
  <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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>1-6-1</title>
  <!-- 引入 jQuery -->
  <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    //等待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>
  <input type="checkbox" id="cr" />
  <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

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

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

- Author -

上善，若水

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
javascript一点特殊用法
May 28 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Angularjs 滚动加载更多数据
Mar 17 #Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 #Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 #Javascript
基于jquery实现简单的分页控件
Mar 17 #Javascript
jQuery实现图片局部放大镜效果
Mar 17 #Javascript
jQuery实现放大镜效果实例代码
Mar 17 #Javascript
node.js使用cluster实现多进程
Mar 17 #Javascript
Docker(14) 波段(1) 城市猎人(1) 西索(1) explain(2) 最终幻想(1) AngularJS(2) 帝国时代(1) 守望先锋(1) HAM-2000(1)
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Javascript - HTML的request类
2006/07/15 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
vue+ts下对axios的封装实现
2020/02/18 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
javascript实现评分功能
2020/06/24 Javascript
python3爬取淘宝信息代码分析
2018/02/10 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
Blank NYC官网：夹克、牛仔裤等
2020/12/16 全球购物
公务员的自我鉴定
2013/10/26 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
项目采购员岗位职责
2014/04/15 职场文书
网络技术专业求职信
2014/05/02 职场文书
支行行长岗位职责
2015/02/15 职场文书
实习护士自荐信
2015/03/25 职场文书
爱心捐款活动总结
2015/05/09 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
李清照的诗词赏析（20首）
2019/08/22 职场文书
MySQL锁机制
2021/04/05 MySQL
教你怎么用Python生成九宫格照片
2021/05/20 Python