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框架的AJAX实例代码
Nov 03 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
js实现随机点名
Jan 19 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多线程之内部多线程实例分析
2015/03/09 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
js 函数的副作用分析
2011/08/23 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
Python中的下划线详解
2015/06/24 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
汽修专业自荐信
2014/07/07 职场文书
超市周年庆活动方案
2014/08/16 职场文书
股东合作协议书
2014/09/12 职场文书
公司合并协议书范本
2014/09/30 职场文书
我的长征观后感
2015/06/09 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android