zoukankan      html  css  js  c++  java
  • JQuery从头学起第二讲

    作者:绝地苍狼

           在第一讲中,已经对JQuery做了入门级的介绍,我相信看过的网友都应该知道怎么开始写一个简单的JQuery程序了。首先是需要引入一个JQuery包,其次是根据JQuery的语法写代码就可以了。

            这一讲中,主要对JQuery的选择器做个简单的介绍,JQuery是怎么样来获取到值的。废话不多说,直接贴代码,我们根据DEMO来说事。

    代码
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title></title>

    <script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>

    <script type="text/javascript">

    function btnclick() {

    var t1
    = $("#txt1").val();

    alert(t1);

    }

    </script>

    <script type="text/javascript">

    $(document).ready(function() {

    $(
    "#btn2").click(function() {

    var t1
    = $("#txt1").val();

    alert(t1);

    });

    });

    </script>

    </head>

    <body>

    <form id="form1" runat="server">

    <div>

    <input id="txt1" type="text" />

    <input id="btn" type="button" value="button" onclick="btnclick();" />

    <input id="btn2" type="button" value="button2" />

    </div>

    </form>

    </body>

    </html>

    从代码的第一行可以看出,其实这是个aspx页面,其实把第一行去掉也没关系,因为JQuery就是JavaScript脚本,在htmL里也同样可以运行。因为我是用VS写的JQuery所以就直接添加aspx页了。

    代码中东西很少,头部写了两段JavaScript脚本,body中有一个文本输入框,两个按钮,一个按钮有onclick="btnclick();"事件,另一个没有。从运行的效果看,其实两个button实现的是相同的效果,都是弹出文本框输入的内容。现在我们来简单分析下这两段JS

    在第一段JS中,自定义了个函数,名字叫:btnclick(),该函数体内用var 关键字定义了个变量t1。T1的值通过JQuery的选择器得到。$("#txt1")创建了一个JQuery的对象,#取的是ID,如果换成name则会得不到值。$("#txt1")的val()方法获取到了文本框的值。$("#txt1").val()相当于JavaScript中的document.getElementById("txt1").value;

    第一个Button中onclick事件执行了第一段JS中的自定义函数,那么第二个Button中没有onclick事件,如何实现与第一个Button相同的效果呢?我们接下来分析第二段JS代码。

    第二段JS代码中一开始就直接创建了个JQuery的document对象,并调用了document对象的ready事件,ready事件会在DOM加载完后立即执行。在ready事件中又建了个JQuery对象$("#btn2"),从该对象可以看出JQuery选择的是id为btn2的控件。创建$("#btn2")的同时调用了onclick();方法。正是这个方法实现了让Button二实现了和Button一相同的效果。这里简单说下,在第二段JS代码中如果把$(document).ready(function() {});这个事件去掉,直接写$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么点击第二个Button将不会有任何的效果。

         今天这一讲就到此,其他不赘述,如果有疑问或需要源码可以加入群:34979719,下一讲,我们将会讲常用控件的取值和赋值。

  • 相关阅读:
    JVM活学活用——GC算法 垃圾收集器
    JVM活学活用——类加载机制
    JVM活学活用——Jvm内存结构
    优化springboot
    Java基础巩固计划
    Java自定义注解
    记一次内存溢出的分析经历
    redis学习笔记-redis的安装
    记一次线程池调优经历
    Python中关于split和splitext的差别和运用
  • 原文地址:https://www.cnblogs.com/_fyz/p/jquery2.html
Copyright © 2011-2022 走看看