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 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
微信小程序实现文字无限轮播效果
Dec 28 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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生成随机密码类分享
2014/06/25 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
html下载本地
2006/06/19 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python contextlib模块使用示例
2015/02/18 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python excel多行合并的方法
2020/12/09 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
银行学习十八大感想
2014/01/11 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
校车安全管理责任书
2015/05/11 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python