jQuery入门与使用

来源：互联网发布：还有哪些办公软件编辑：程序博客网时间：2024/06/05 01:14

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

简单点就是用在前端上的JS，是一个Javascript函数库，里面封装了js对页面的所有操作。

在使用jQuery之前要到官网http://jquery.com/下载jQuery的文件，现在最新版本是jquery-3.1.1.js，要把它放到我们的项目中，在jsp中才可以使用它。

入门

由于初次学习jQuery，所以今天的代码都是很简单的。

one.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>jQuery技术</title>    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>    <script type="text/javascript">    //jQuery核心函数1：jQuery(callback)  页面一加载完就立即执行回掉函数callback//该方式的功能类似于:window.onload=function(){....}jQuery( function(){//jQuery核心函数2：选择页面上的元素  jQuery([sel,[context]])  功能：根据选择器(参数sel)选中页面中的元素，并把它转换成jQuery对象，这样就可以调用jQuery中的方法了jQuery("#btn1").click( function(){alert("Hello  World");});});//利用别名$$(function(){$("#btn2").click(function(){alert("一般都是使用别名 '$()'.");});});//$(fn)和window.load=fn的区别：jQuery是添加fn事件(可重复添加，顺序执行),而后者则是将当前fn事件来替换掉旧的事件$(function(){$("#btn1").click(function(){alert("第二个fn ...");});});    </script>  </head>    <body>      <button id="btn1">--btn1--</button><br><br><br>        <button id="btn2">--btn2--</button><br><br><br>  </body></html>

结果图：

two.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>jQuery技术</title>    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>  </head>    <body>      <button id="btn1">--btn1--</button><br><br><br>        <button >--按钮2--</button><br><br><br>       <button >--按钮3--</button><br><br><br>    <script type="text/javascript">    $(function(){    var btn=$("#btn1");    btn.click(function(){    //学习设置一个页面元素的属性    $("button").attr("disabled","disabled");//元素选择器  选择所有<button>标签    alert("噔噔...");    alert("噔噔...噔噔噔噔");    $("button").removeAttr("disabled");//从每一个匹配的元素中删除一个属性    });    });        </script>  </body></html>

结果：

three.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>jQuery技术</title>    <style type="text/css">    div{    width: 60%;    height: 150px;    background: yellow;    margin: 10px;    }    </style>    <script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>    <script type="text/javascript">    /*jQuery选择器和CSS的一样,如：    1. "#"为id选择器    2. "E"为元素选择器    3. "E E2"为包含选择器    4. "."为类选择器    5. "input[name='age']"属性选择器    6. ":"冒号选择器    */    $(function(){    //1. "#"为id选择器    $("#btn1").click(function(){    //2. "E"为元素选择器    $("#d1").html("这里是div1......");//会把id为"#d1"中的所有html内容替换    $("div:first").html("看，，下雪了....");    $("div:eq(2)").html("..................");//eq(index)获取第N个元素，index>=0,从0算起;index<0,从最后一个元素开始倒数.        //3. "E E2"为包含选择器    //$("div p").html("包含选择器演示......");    $("#d1~div").html("今天天气不错...");//prev ~ siblings  匹配 prev 元素之后的所有 siblings 元素(找到所有同辈的 元素,本身不算)        //4. "."为类选择器    $(".fd1").css("background","blue").html("类选择器").css("border","1px solid red");        //5. "input[name='age']"属性选择器    var text=$("input[name='name']").val();//选择name值为"name"的<input>标签，并获取其中的值    //alert(text);    $("input[name='age']").val("22");//设置值        //6. ":"冒号选择器    var len=$(":input").length;    alert(len);    });        });        </script>  </head>    <body>  <input type="button" value="演示jQuery选择器" id="btn1">  <div id="d1">  <p>div1----ppppppppp</p>  </div>  <div id="d2">  <p>div2----ppppppppp</p>  </div>  <div id="d3">  <p>div3----ppppppppp</p>  </div>  <div id="d4">  <b>bold  <p>div4----ppppppppp</p>  </b>  </div>    <form>  <div class="fd1">aaaa</div>  Name:<input type="text" name="name"/>  Age: <input type="text" name="age"/>  </form>  </body></html>

未点击按钮之前：

点击按钮之后：

0 0