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学习的第一课,希望大家继续关注。

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
详解tween.js的使用教程
Sep 14 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
Angular移动端页面input无法输入的解决方法
Nov 14 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
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
You might like
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
详解javascript void(0)
2020/07/13 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
什么是组件架构
2016/05/15 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
租房协议书怎么写
2014/04/10 职场文书
大学新学期计划书
2014/04/28 职场文书
文明村镇申报材料
2014/05/06 职场文书
村委会贫困证明范文
2014/09/21 职场文书
学习心理学心得体会
2016/01/22 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android