jQuery是什么
　　John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作
为什么要使用jQuery
　　（1）write less do more
　　（2）免费，开源且轻量级的js库，容量很小(项目中，提倡引用min版的js库)
　　（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
　　（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能(jQuery不是将所有JS全部封装，只是有选择的封装)
　　（5）文档手册很全，很详细
　　（6）成熟的插件可供选择
　　（7）提倡对主要的html标签提供一个id属性，但不是必须的
　　（8）出错后，有一定的提示信息
　　（9）不用再在html里面通过<script>标签插入一大堆js来调用命令了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery入门</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

  </head>

  <body>

    <input id="inputID" type="button" value="Hello jQuery"/>

    <div id="divID">哈哈哈</div>

    <script type="text/javascript">

        //取得<input>标签中的value属性的内容

        //js方式

        var inputElement = document.getElementById("inputID");

        var input = inputElement.value;

        alert(input);

        //jquery方式

        var $input = $("#inputID");

        var input = $input.val();

        alert(input);

        //取得<div>标签中的文本内容

        //js方式

        var divElement = document.getElementById("divID");

        var div = divElement.innerHTML;

        alert(div);

        //jquery方式

        var $div = $("#divID");

        var div = $div.html();

        alert(div);

    </script>

  </body>

</html>

js对象和jQuery对象相互转换
　　js对象转成jQuery对象【重点】
　　　　语法：$(js对象)---->jQuery对象
　　　　例如：$(divElement)---->$div
　　　　例如：$(this)---->$this
　　　　注意：jQuery对象将js对象做了封装，js对象二边无引号

var inputElement = document.getElementById("inputID");//js对象

var $input = $(inputElement);//jquery对象

var txt = $input.val();

alert(txt);

　　jQuery对象转成js对象
　　　　语法1：jQuery对象[下标，从0开始]
　　　　语法2：jQuery对象.get(下标，从0开始)
　　　　例如：$div[0]---->divElement
　　　　注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然($div.innerHTML（错）,divElement.html(错))

var $div = $("#divID");//jquery对象

var divElement = $div[0];//js对象(方式一)

//var divElement = $div.get(0);//js对象(方式二)

var txt = divElement.innerHTML;

alert(txt);

js对象和jQuery对象的区别
　　js对象的三种基本定位方式
　　　　（A）通过ID属性：document.getElementById()
　　　　（B）通过NAME属性：document.getElementsByName()
　　　　（C）通过标签名：document.getElementsByTagName()
　　jQuery对象的三种基本定位方式
　　　　（A）通过ID属性：$("#id属性值")
　　　　（B）通过标签名：$("标签名")
　　　　（C）通过CLASS属性：$(".样式名")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <style type="text/css">

            .oneClass {

                font-size: 44px;

                color: red

            }

        </style>

        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

    </head>

    <body>

        <input type="text" id="usernameID" value="这就是jQuery库" />

        <div id="divID" class="oneClass">这是div标签中的内容</div>

        <script type="text/javascript">

              //通过"#id"定位<input>

              alert( $("#usernameID").val() );

              //通过"标签名"定位<input><div>

              alert( $("input").val() );

              alert( $("div").html() );

              //通过"样式名"定位<div>

              alert( $(".oneClass").html() );

          </script>

    </body>

</html>

　　js对象出错的显示
　　　　没有合理的提示信息
　　　　例如：alert(document.getElementById("usernameIDD").value)
　　jQuery对象出错的显示
　　　　有合理的提示信息，例如：undefined
　　　　例如：alert($("#usernameIDD").val())

jQuery简单入门的更多相关文章

  1. jQuery简单入门(三)

    3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...

  2. jQuery简单入门(二)

    2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQue ...

  3. jQuery简单入门（五）

    5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...

  4. jQuery简单入门(四)

    4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...

  5. jquery简单入门（一）

    相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...

  6. jquery简单入门1

    前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...

  7. jquery 简单入门

    例:GridView

  8. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  9. HTML5简单入门系列（五）

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

随机推荐

  1. python标准模块（os及sys模块）

    一.os模块 用于提供系统级别的操作 os.getcwd() 获取当前工作目录 os.stat('path/filename') 获取文件/目录信息,其中包括文件大小等 os.sep 获得操作系统特定 ...

  2. iOS 浅谈：深.浅拷贝与copy.strong

    深.浅拷贝 copy mutableCopy NSString NSString *string = @"汉斯哈哈哈"; // 没有产生新对象 NSString *copyStri ...

  3. word20161221

    S/MIME, Secure Multipurpose Internet Mail Extensions / 安全多用途网际邮件扩展协议 SACL, system access control lis ...

  4. HTML5本地存储

    之前对这个还不太熟悉,项目中在账号登录时,获取账号的信息,存储在本地然后随时调用//存储localStorage.setItem('data',值); //获取var information = lo ...

  5. ARM概论(Advanced RISC Machines)

    简介 ARM7是32 位通用微处理器ARM(Advanced RISC Machines)家族中的一员,具有比较低的电源消耗和良好的性价比, 基于(精简指令)RISC结构,指令集和相关的译码机制与微程 ...

  6. Python之路,Day8 - Python基础 面向对象高级进阶与socket基础

    类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的 ...

  7. WPF直接用Window.Close直接关闭窗口导致不能完全退出的问题

    前几天我在CSDN扔了一个问题,基本描述一下:写了一段这样的代码,来实现获取Control的template,却发现一个这样的问题,就是当我打开了一个window以后,手动调用Close(),窗口的确 ...

  8. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  9. C语言简单文法

    <源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...

  10. iOSIPV6简单测试环境搭建

    应苹果官方要求,iOS应用必须适配IPV6才能通过审核,这里分享一个简单的ipv6测试方法 一.工具原料 1.1 Mac电脑一台 1.2 iPhone手机两部 1.3 数据线一根 二.步骤方法 2.1 ...