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. 利用AOP与ToStringBuilder简化日志记录

    刚学spring的时候书上就强调spring的核心就是ioc和aop blablabla...... IOC到处都能看到...AOP么刚开始接触的时候使用在声明式事务上面..当时书上还提到一个用到ao ...

  2. C语言基础(10)-数组

    一.数组的定义 数组就是在内存中连续的相同类型的变量空间. 二.数组在内存中的存储方式 同一个数组所有的成员都是相同的数据类型,同时所有的成员在内存中的地址是连续的,数组名是一个地址的常量,代表数组中 ...

  3. Unity3D Editor 扩展

    官方教程:链接 EditorLayout API:链接 Handles API:链接 1.首先来个Inspector面板Editor的实现 要实现一个组件在Inspector中的Editor功能,首先 ...

  4. iOS多线程-多线程实现之GCD

    什么是GCD? GCD: Grand Central Dispatch (重要的中枢调度器) GCD是纯C语言的, 学习它就是学习一些函数的使用. GCD的核心概念和使用步骤 核心概念 任务 : 执行 ...

  5. 【Matlab】特征值

    特征值 clc;clear; %[V,D]=eig(A) //求取特征值 A=[ 1 2 4; 4 0 7; 9 1 3 ]; [V,D]=eig(A) 结果如下: 求解特征值与特征向量时矩阵必须是方 ...

  6. 我们为什么要看《超实用的Node.JS代码段》

    不知道自己Node.JS水平如何?看这张图 如果一半以上的你都不会,必须看这本书,一线工程师用代码和功能页面来告诉你每一个技巧点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1.     ...

  7. XML基础

    什么是XML? XML(Extensible Markup Language)可扩展标记语言,是一种以简单文本格式存储数据的方式. 它最重要的组成部分是XML元素,包含了文档的实际数据. XML的几个 ...

  8. STM32F10xxx 之 System tick Timer(SYSTICK Timer)

    背景 研究STM32F10xxx定时器的时候,无意间看到了System tick Timer,于是比较深入的了解下,在此做个记录. 正文 System tick Timer是Cotex-M内核的24位 ...

  9. mysql导出部分表数据

    mysqldump -uroot -p -h 192.168.1.11 -P 3306 mojiarticle UID_IMEI --where "ID > 1021230 and I ...

  10. ecshop 秒杀并发时库存会被减到小于0的解决办法

    ecshop 秒杀并发时库存会被减到小于0更新库存后,再进行库存检查,如果库存为负数,则执行事务的回滚. begin();//开始一个事物处理开始 $sql = "UPDATE " ...