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. tomcat启动的了，但是加载项目失败

    解决方法: 1.tomcat启动是好的,也有可能找不到tomcat的dll,所以,检查一下myeclipse所使用的tomcat的解压目录是不是有空格,有空格的话,重新解压到一个新目录,千万不要有空格 ...

  2. nodejs net模块

    net模块是同样是nodejs的核心模块.在http模块概览里提到,http.Server继承了net.Server,此外,http客户端与http服务端的通信均依赖于socket(net.Socke ...

  3. java开发问题总结-4-Maven使用问题汇总

    Non-resolvable parent POM [INFO] Scanning for projects... [ERROR] The build could not read 1 project ...

  4. 有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性？

    一,以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 s ...

  5. WPF这样的界面应该如何编写呢？

    如上图: 外围是一个Border,内部填充一个Grid,Grid分成两行,第一行有一个按钮可以进行操作(主要是操作ListBox的数据源:增加和删除对象),第二行填充一个ListBox,绑定数据源并根 ...

  6. Mongodb命令集合

    一.数据库常用命令 1.Help查看命令提示 复制代码代码如下: help db.help(); db.yourColl.help(); db.youColl.find().help(); rs.he ...

  7. 使用spring的AOP时产生的异常

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'userService' ...

  8. shell 脚本中的运算

    #!/bin/bash read -p "please Insert two integer values: " a b if [ ! -n "$a" -o ! ...

  9. Tomcat的设定

    tomcat 版本  apache-tomcat-7.0.68-windows-x64 1.解压文件到 eclipse文件夹中,这个放哪都可以,个人习惯而已 2.tomcat目录结构 图片为盗图- 3 ...

  10. shell语法

    基本语法列表 #linux组成:内核+工具 #linux启动: . getty:提示登录名和密码,输入之后调用login . login:login验证用户名和密码,然后调用shell . shell ...