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> td1</td> <td> td2</td> </tr> <tr> <td> td3</td> <td> 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