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. MySQL主从复制、半同步复制和主主复制概述

    http://www.cnblogs.com/zping/p/5275531.html

  2. 2.2、Hibernate用注解方式实现一对多、多对多关系

    一.一对多关系 1.在上一篇日志中用.xml配置文件项目基础上,再往lib目录先添加一个包-hibernate-jpa-2.0-api-1.0.0.Final.jar 2.新建一个com.st.bea ...

  3. 字体大小和背景颜色修改--Android Studio

    打开: File/seting/Editor/colors&Fonts/Fonts editor Font处默认的不让修改 所以先点击save as  随便点个名字 然后 size就可以修改了

  4. NSIS检测.NET Framework并在线下载

    Section -.NET Framework ;检测是否是需要的.NET Framework版本 Call GetNetFrameworkVersion Pop $R1 ;${If} $R1 < ...

  5. calendar的一些操作

    一.通过分析日期函数,根据日期进行一系列操作,例如:我们需要知道2个时间段中所有的日期等等. 由于Calendar 类是一个抽象类,因此我们不能通过new来获取该对象的实例.我们可以通过其类方法 ge ...

  6. 简单PE类代码

    三个文件分别是类定义文件pefile.h;类实现文件pefile.cpp;类调用文件petype.cpp. #ifndef PE_FILE_H #define PE_FILE_H #include & ...

  7. Unity MonoDevelop一打开未响应

    在学习Untiy的时候,使用内置的MonoDevelop开发工具.本来就不好用,经常出现未响应的情况,然后重启解决.终于有一次莫名其妙的崩溃了,在Unity打开该IDE就未响应,但直接打开MonoDe ...

  8. RSA非对称性前端加密后端解密

    前端加密代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  9. Ninject学习（一） - Dependency Injection By Hand

    大体上是把官网上的翻译下而已. http://www.ninject.90iogjkdcrorg/wiki.html Dependency Injection By Hand So what's Ni ...

  10. 那些PHP中没有全称的简写

    PHP中的GD库,全网没发现GD二字母的全称是什么,包括PHP.net,都搜不到GD.G应该是graphi,D是什么? die: 从php_mysql.dll到php_mysqli的变化,那个i是什么 ...