jQuery的简介

jQuery的简介

jQuery凭借简洁的语法和跨平台的兼容性,极大简化了JavaScript开发人员便利HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

jQuery的优势

  • 轻量级
  • 强大的选择器
  • 出色的DOM操作的封装
  • 可靠的事件处理机制
  • 完善的Ajax
  • 不污染顶级变量
  • 出色的浏览器兼容性
  • 链式操作方式
  • 隐式迭代。当用jQuery找到带有“.myClass”类的全部元素,然后隐藏他们时,无需循环遍历每一个返回元素。相反,jQuery里的方法都被设计成自动操作对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅地减少了代码量
  • 行为层与结构层的分离。开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层有结构层完全分离的思想,可以使jQuery开发人员和HTML或其他页面开发人员各司其职,拜托过去开发冲突或个人单干模式。同时为后期维护也非常方便,不需要再HTML代码中寻找某些函数和重复修改HTML代码
  • 丰富的插件支持
  • 完善的文档
  • 开源

jQuery简单示例

jQuery程序中,首先要明确一点:在jQuery库里,$就是jQuery的一个简写形式,例如$('#foo')jQuery('#foo')是等价的。

$(document).ready(function(){
    alert('Hello World!')
});

window.onload和$(document).ready()的对比

对比 window.onload $(document.ready)
执行时机 必须等待网页中的所有内容
加载完毕之后,才能执行
网页2中所有的DOM结构绘制
完毕之后就执行,可能DOM元素
关联的东西还没有加载完
编写个数 不能同时编写多个 能同时编写多个
简写形式 可以简写成$(function(){...});

jQuery代码风格

  1. 对于同一个对象不超过3个操作的,可以直接写成一行。
    $('li').show().unbind('click');
  2. 对于同一个对象的较多操作,建议每行写一个操作。
$(this).removeClass('mouseout')
       .addClass('moseover')
       .stop()
       .fadeTo('fast',0.6)
       .fadeTo('fast',1)
       .unbind('click')
       .click(function(){...});
  1. 对于多个对象的少量操作,可以把每个对象写作一行,如果涉及子元素,可以适当缩进
$(this).addClass('highlight')
       .chlidren('li').show().end()
.siblings().removeClass('highlight')
       .children('li').hide();

jQuery对象和DOM对象

DOM对象

DOM(Document Object Model,文档对象模型),每一份DOM都可以表示成一棵树。在这个树中,每一个元素节点都是DOM元素节点。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法。

var domObj = document.getElementById('id');     //获得DOM对象
var ObjHTML= domObj.innerHTML   //使用JavaScript中的属性--innerHTML

jQuery对象

jQuery就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery是jQuery中独有的、如果一个对象是jQuery对象,那么就可以使用jQuery中的方法。
$('#foo').html; //获取id为foo元素内的html代码 .html是jQUery里的方法

在jQuery对象中午饭使用DOM对象的任何方法。同理DOM对象也不可以使用jQUery里的方法。

jQuery对象和DOM对象的相互转换

在讨论相互转换之前,先约定好定义变量风格。如果获取的是jQuery对象,就在变量前面加上$
var $variable = 'jQuery对象';
如果是DOM对象
var variable = 'Dom对象';

1. jQuery对象转换为DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象,即[index]和get[index]。

  1. jQuery对象是一个类似数组的对象,可以通过[index]方法得到相应的DOM对象
var $cr = $('#cr');     //jQuery对象
var cr = $cr[0];        //DOM对象
  1. 另一种方法是jQuery本身提供的,通过get(index)来得到相应的DOM对象。
var $cr = $('#cr');     //jQuery对象
var cr = $cr.get(0);        //DOM对象

1. DOM对象转换为jQuery对象

对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象。

var cr = document.getElementById('$cr');    DOM对象
var $cr = $(cr);    jQuery对象
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,466评论 0 44
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,386评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,202评论 0 1
  • jQuery CDN和下载地址 jQuery CDN地址 : http://www.bootcdn.cn/jque...
    满嘴骚话阅读 394评论 0 2
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,681评论 18 503