继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Jquery基础教程

慕妹3242003
关注TA
已关注
手记 248
粉丝 9
获赞 25

1. jQuery概述

- jQuery是一个优秀的JavaScript框架

- 主要提供如下功能

  - 访问页面框架的局部

  - 修改页面的表现

  - 更改页面的内容

  - 响应事件

  - 为页面添加动画

  - 与服务器异步交互

  - 简化常用的JavaScript操作

- 下载并使用jQuery

  - 官方网站(http://jquery.com/)

  - 不需要任何安装过程

2. jQuery的“$”

- 选择器

- 功能函数前缀

- window.onload

  - window.onload的冲突

  - ready()方法

- 创建DOM元素

3. 选择器

- 属性选择器

- 位置选择器

3. 实例

实例一 :一行代码实现隔行变色效果:

Code
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
    <style type="text/css">
    .tablecss
    {
    text-align: center
     width: 393px; 
     background-color: #ffcc66;
   border:1;
    }
    .eventr
    {     text-align: center;
       background-color: #ffffff;
    }
     .oddtr
    {
        text-align: center;
       background-color: #66ffcc;
    }
    
    </style>
    <script language="javascript" src="jquery.js">
    </script>
    <script language="javascript">
    $(function()
    {
//    $("tr").onclick(function(){alert();});
    $("table.tablecss tr:nth-child(odd)").addClass("oddtr");
      $("table tr:nth-child(even)").addClass("eventr");
    }
    )
    </script>
</head>
<body>
  
   
        <table class="tablecss">
            <tr>
                <td >
                    001</td>
                <td >
                    xiaoming</td>
                <td >
                    14</td>
            </tr>
            <tr>
                <td >
                    002</td>
                <td >
                    xiaohong</td>
                <td >
                    13</td>
            </tr>
            <tr>
                <td >
                    003</td>
                <td >
                    xiaozhamg</td>
                <td>
                    15</td>
            </tr>
            <tr>
                <td >
                    004</td>
                <td >
                    zhuqilin</td>
                <td >
                    22</td>
            </tr>
            <tr>
                <td >
                    005</td>
                <td >
                    zhangzhiqiang</td>
                <td >
                    22</td>
            </tr>
            <tr>
                <td >
                    006</td>
                <td >
                    wangliyan</td>
                <td >
                    21</td>
            </tr>
            <tr>
                <td >
                    007</td>
                <td >
                    zhouzhengwen</td>
                <td >
                    22</td>
            </tr>
            <tr>
                <td >
                    008</td>
                <td >
                    tty</td>
                <td >
                    29</td>
            </tr>
            <tr>
                <td >
                    009</td>
                <td >
                    aming</td>
                <td >
                    30</td>
            </tr>
        </table>

  
</body>
</html>

运行效果:

 

实例二 :选择器

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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 language="javascript" src="jquery.js">
    </script>
    <script language="javascript" type="text/javascript">
    window.onload=function()
    {
    var zql=$("h2 a");
    for(var i=0;i<zql.length;i++)
    {
    zql[i].href="http://www.sina.com.cn/";
    zql[i].innerHTML="新浪";
    }
    }
    </script>
    
</head>
<body>
<h2><a href="#">正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
</body>
</html>

 

运行效果:

 

 

实例三:字符串操作:

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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 language="javascript" src="jquery.js">
    </script>
    <script language="javascript" type="text/javascript">
    var str="    123456789";
 str=$.trim(str);
 alert(str.length);
 alert(str);
  
    </script>
</head>
<body>
</body>
</html>

 

实例4:获取浏览器的型号和版本号“

 

Code
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 language="javascript" src=jquery.js>
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <script language="javascript" type="text/javascript">
    function getbrowser()
    {
    if($.browser.msie)
    { return "IE";}
    if($.browser.mozilla)
    { return "mozilla";}
    if($.browser.safari)
    {return "safari";}
    if($.browser.opera)
    {return "opera";}
    }
    var a=getbrowser();
    document.write("你的浏览器是:"+a+"你的版本号是:"+$.browser.version)
    </script>
    </div>
    </form>
</body>
</html>

四:核心部分

$(expr):该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础。expr:字符串,一个查询表达式或一段html字符串

例子:

<p>one</p>
<div>
      <p>two</p>
</div>
    <p>three</p> 
    <a href="#" id="test" onClick="jq()" >jQuery</a>

 

 

function jq(){  
    alert($("div > p").html());  
}

 

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
}

 

当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”

 $(elem)

说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素

例子:
未执行jQuery前:

<p>one</p>
  <div>
     <p>two</p>
  </div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

 

 

function jq(){
    alert($(document).find("div > p").html());
}

 

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
   $(document.body).background("black");
}

 

运行:当点击id为test的元素时,背景色变成黑色
$(elems)

说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

<form id="form1">
      <input type="text" name="textfield">
      <input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>

 

 

function jq(){ 
   $(form1.elements ).hide(); 
}

 

运行:当点击id为test的元素时,隐藏form1表单中的所有元素。

jQuery代码及功能:

四:总结

  通过Jquery使我们操作更加方便.

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP