zoukankan      html  css  js  c++  java
  • jQuery入门

    jQuery是什么

        John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作

    为什么要使用jQuery

       (1)写少代码,做多事情【write less do more】

       (2)免费,开源且轻量级的js库,容量很小

            注意:项目中,提倡引用min版的js库

       (3)兼容市面上主流浏览器,例如 IE,Firefox,Chrome

            注意:jQuery不是将所有JS全部封装,只是有选择的封装

       (4)能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步AJAX功能

       (5)文档手册很全,很详细

       (6)成熟的插件可供选择

       (7)提倡对主要的html标签提供一个id属性,但不是必须的

       (8)出错后,有一定的提示信息

       (9)不用再在html里面通过<script>标签插入一大堆js来调用命令了

    jQuery开发步骤

       (1)引用第三方js库文件,<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

       (2)查阅并使用api手册,$("#divID").html()/val()/text()/css("color","red")/....


    <!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="这就是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>
     
  • 相关阅读:
    看书笔记《python基础》__1
    MQTT
    杂记
    类型转化
    soc
    时钟同步
    设置地址
    清理日志
    pandas_matplot_seaborn
    Qt_Quick开发实战精解_4
  • 原文地址:https://www.cnblogs.com/loaderman/p/10056959.html
Copyright © 2011-2022 走看看