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. web中c#纯网站中引用log4net模块，不记录日志

    如题,解决如下: 1.log4net.config配置如下: <?xml version="1.0" encoding="utf-8" ?> < ...

  2. mySql 远程连接（is not allowed to connect to this MySQL server）

    如果你想连接你的mysql的时候发生这个错误: ERROR 1130: Host '192.168.1.3' is not allowed to connect to this MySQL serve ...

  3. 【转】 jquery遍历json数组方法

    $(function () { var tbody = ""; //------------遍历对象 .each的使用------------- //对象语法JSON数据格式(当服 ...

  4. Excel——使用OFFSET、MATCH、COUNTA实现二级菜单

    如图所示,接下来提供两种办法实现: 1.将A.B.C.D定义为名称NAME. 2.设置一级菜单单元格数据有效性为NAME. 3.设置二级菜单格数据有效为: =OFFSET($A$1,MATCH($A6 ...

  5. 反编译apk

    一.反编译Apk得到Java源代码 首先要下载两个工具:dex2jar和JD-GUI 前者是将apk中的classes.dex转化成Jar文件,而JD-GUI是一个反编译工具,可以直接查看Jar包的源 ...

  6. Sql Server函数全解<二>数学函数

    阅读目录 1.绝对值函数ABS(x)和返回圆周率的函数PI() 2.平方根函数SQRT(x) 3.获取随机函数的函数RAND()和RAND(x) 4.四舍五入函数ROUND(x,y) 5.符号函数SI ...

  7. latex公式编号

    1 \begin{flalign*} 2 % In this way (this arrange of &), the equation will in the center and alig ...

  8. vs里根据json快速创建对应类的方法

    有时候,我们在调用别人接口的时候,服务端返回了一个json格式的字符串,我们要获取json里面的数据的话一般有两种方式: 1.通过正则 2.反序列化成一个对象 第一种方式这里不再多说,主要说一下第二种 ...

  9. 【webGL】threejs入门 ---创建一个简单立方体

    开发环境 Three.js是一个JavaScript库,所以,你可以使用平时开发JavaScript应用的环境开发Three.js应用.如果你没什么偏好的话,我会推荐Komodo IDE. 调试建议使 ...

  10. 让一个图片在div中居中（四种方法）

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...