JQuery学习

以下为个人学习笔记,以便使用时查阅.仅供参考，如有错误请指出！谢谢

<%@ 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>JQuery Study</title>
    <script type="text/javascript" src="JQuery/jquery.3.2.min.js"></script>
    <script type="text/javascript" src="JQuery/JScript.js"></script>
    <style type="text/css">
        .style1 {
            width: 100%; border:1px solid blue;
        }
        .protected{
            color:Lime;
            border:solid 1px blue;
            cursor:crosshair;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <pre>
            JQuery Study;
            StudyTime:2009年7月24日21:36:43;
            Author:JINHO;
        </pre>
        <pre>
            学习JQuery框架,我们首先来学习[选择器]吧！
            
            获取元素:
            基本:   $(".class")==>匹配使用了class的类样式元素
                    $("element")==>如:$("div"),element为所有的表签
                    $("#id")==>匹配ID,如果匹配ID前面需要加#
                    $("selector")==>$("div,span,p.myClass")选择器
                    $("*")==>匹配到所有元素
             $("ul li:first-child"):在每个 ul 中查找第一个 li 
             $("ul li:first-last") :在每个 ul 中查找最后个 li 
             $("ul li:nth-child(odd)")： 匹配其父元素下的第N个子或奇偶元素
             $("ul li:only-child") ：如果某个元素是父元素中唯一的子元素，那将会被匹配
             $("form input"):[获取form中所有的input元素]
             $("form > input"):[获取form中所有[子级]的input元素] 意思是不包含嵌套的input标签
             $("label + input") ：匹配所有跟在 label 后面的 input 元素 
             $("form ~ input") 找到所有与表单同辈的 input 元素 [兄弟节点]
             $("div.eq(0)")==$("div.first")获取第一个div元素
             $("div.even"):获取索引为偶数的div元素
             $("div.odd"):获取索引为奇数的div元素
             $("div.gt(1)"):获取所有索引大于1的div元素
             $("div.lt(3)"):获取所有索引小于3的div元素
             $("div.last"):获取最后一个div元素
             ==>$("input:not(:checked)") :查找所有未选中的 input 元素 [disabled/enabled/select option:selected]
             ==>$(":header"):获取[h1-h6]标题类元素
             $(":button") 匹配所有按钮
             $(":file")\$(":input")...类似
             $(":hidden") & $(":visible") :隐藏和可见元素
        </pre>
        
        
        <!--示例-->
        <div id="div1">my name is JINHO</div>
        <div id="div2">who is jinho</div>
        <div id="div3">I don't know!</div>
        <div id="div4">JINHO is me</div>
        <div id="div5"></div>
        <div id="div6"><p><span></span></p></div>
        
        <input name="flower" type="checkbox" checked="checked" />
        <input name="test" style="display:none;" />
        
        <!--<script type="text/javascript">
            $(
                function(){
                    //alert("good");
                    var arr = $("div.contains('JINHO')");
                    alert(arr.length);
                }
            );
        </script>-->
        <div class="protected">protected div</div>
        <div id="msg"></div>
        <div id="result"></div>
    </div>
    
    <table class="style1">
        <tr>
            <td>
                &nbsp;td1</td>
            <td>
                &nbsp;td2</td>
        </tr>
        <tr>
            <td>
                &nbsp;td3</td>
            <td>
                &nbsp;td4</td>
        </tr>
    </table>
    </form>
</body>
</html>

JScript.js

/// <reference path="jquery-1.2.3-intellisense.js" />
//相当于window.onload事件
$(
    function(){
        //查找所有包含"JINHO"的[div]元素 数组
        var arr = $("div:contains('JINHO')");
        for(var i=0;i<arr.length;i++){
            //alert(arr.eq(i).html());
        }
        
        //查找[div]中所有不包含子元素或者文本的空元素 
        var empty = $("div:empty");
        empty.html("is empty!");
        empty.css("color","red");
        //给所有包含 span 元素的 p 元素 的内容改为true; 
        var result = $("p:has(span)");
        result.html("true");
        //查找所有含有子元素或者文本的 div 元素 
        var childs = $("div:parent");  
        //alert(childs.length);      
        for(var i=0;i<childs.length;i++){
            //alert(childs.eq(i).html());
        }
         
         //
         var elem = $("input:not(:checked)");//checked为属性选择器
         //alert(elem.length);
         
         var hiddenElement = $("input:hidden");
         //var hiddenElement = $(":hidden");
         for(var i=0;i<hiddenElement.length;i++){
            //alert(hiddenElement.eq(i).html());
        }
        //td为奇数的样式
        $("td:odd").css("color","red");
        //tr为偶数的样式
        $("tr:even").css("color","red");
        $("td:even").click(function(){alert($(this).html())});
       
//         $("#msg").ajaxSend(function(evt, request, settings){
//           $(this).append("<li>开始请求: " + settings.url + 
//            "</li>");
//         }); 
    }
);

$(
    function(){
        $.ajax({
                type:"GET",
                url:"test.js",
                dataType:"script"
            }
        );
        
        var data = $.ajax({
                //type:"GET",
                cache:false,
                url:"test.htm",
                async:false
            }
        ).responseText;
        
        //$("#loading").ajaxStop(function(){$(this).hide();});
        //alert(data);
        
        //$.get("test.htm",{name:"jinho",age:"22"},function(data){alert("获取到html页面中的数据:"+data)});
        
        $.ajax({
            asyc:true,
            beforeSend:beforeSendHandler,
            cache:true,
            complete:completeHandler,
            contentType:"application/x-www-form-urlencoded",
            data:"name=jinho&age=22",
            dataFilter:dataFilterHandler,
            //dataType:"html",
            error:errorHandler,
            global:true,
            ifModified:false,
            //jsonp:
            success:successHandler,
            timeout:5000,
            type:"GET",
            url:"test.htm"
        });
        
        //$("#result").load("test.htm",function(){alert("远程载入数据成功！")});
        
        //判断浏览器
        //alert(jQuery.support.tbody );
        
        
    }
);

function beforeSendHandler(XMLHttpRequest){
    this;
}

function completeHandler(XMLHttpRequest,textStatus){
    this;
}

function dataFilterHandler(data, type){
    data = "data";
    return data;
}
function errorHandler(XMLHttpRequest, textStatus, errorThrown){
    alert("出错了"+textStatus);
}   
function successHandler(data, textStatus){
    alert("状态:"+textStatus+"数据:"+data);
}


$(document).ready(
   // function(){alert("加载数据");}
);
//jQuery(function($){$(function(){alert("sdf");});});



window.onload = function(){
    //alert("test");
};

$(window).error(function(){
    $(this).hide();
    return true;
});

Technorati 标签: Jquery

posted on 2010-04-18 21:55 JoinJ 阅读(368) 评论(0) 编辑收藏举报