<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#pannel {
position:relative;
width:100px;
height:100px;
border:1px solid #0050d0;
background:#96e555;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//选择器总结
//jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。
//$("input[name$='3']") input为元素名,[]中包含属性name,name的值以3结尾
//$("input#none5") 不能有空格
//$("input.cls1") 不能有空格
//$("input:first")
//$("input[class][name^='none']") 复合选择器，返回含有class属性且name属性的值以none值开头
//$("input.cls1[name^='none']") 返回class为.cls1且name属性的值以none值开头
//form所有后代input元素
var Init1 = function () {
$("form input").each(function () {
alert($(this).attr("name"));
})
};
//form所有input子元素
var Init2 = function () {
$("form > input").each(function () {
alert($(this).attr("name"));
})
};
//紧接form后的所有input同辈元素
var Init3 = function () {
$("form ~ input").each(function () {
alert($(this).attr("name"));
})
//$("input[name='none2'] ~ input").each(function () {
// alert($(this).attr("name"));
//})
};
//紧接form的第一个input同辈元素
var Init4 = function () {
$("form + input").each(function () {
alert($(this).attr("name"));
})
};
//返回属性name包含none的所有input元素
var Init5 = function () {
$("input[name*='none']").each(function () {
alert($(this).attr("name"));
})
}
//返回class为cls1的所有input元素
var Init6 = function () {
//alert($("input.cls1").attr("name"));
$("input.cls1").each(function () {
alert($(this).attr("name"));
})
}
//返回id为none5的所有input元素
var Init7 = function () {
//alert($("input.cls1").attr("name"));
$("input#none5").each(function () {
alert($(this).attr("name"));
})
}
//返回第一个input元素
var Init8 = function () {
$("input:first").each(function () {
alert($(this).attr("name"));
})
}
//返回第一个input元素
var Init9 = function () {
//$("input[class][name^='none']").each(function () {
// alert($(this).attr("name"));
//})
$("input.cls1[name^='none']").each(function () {
alert($(this).attr("name"));
})
}
//$(Init9);
var GetDom = function (id) {
//alert($("#none7").val());
var $id = $("#" + id);
alert($id);
alert($id.get(0));
alert($id.val());
}
//此处如果直接调用GetDom("none7")，$id.val()值为undefined
//因为$()时，dom元素只是绘制完成，但未加载完成
//$(GetDom("none7"));
//jquery对象与dom对象间的转换
//jquery转dom var $none7=$("#none7");var none7=$none7[0];或 var none7=$none7.get(0);
//dom转jquery var none7=document.getElementById("none7"); var $none7=$(none7);
//与$(GetDom("none7"));对应，
//将方法调用加载到按钮点击事件上，点击可成功获取数据
$(function () {
$("#Button1").bind("click", function () {
GetDom("none7");
});
})
$(function () {
var $cr = $("#cr");
$cr.click(function () {
if ($cr.is(":checked"))
{
alert("恭喜！请继续下一步操作");
}
else
{
alert("请阅读规章制度！");
}
})
})
//让渡变量$的控制权
//jQuery.noConflict();
//(function ($) {
// $(function () {
// //$("#Button2").click(function () {
// // alert("让渡测试");
// //})
// alert("让渡测试");
// });
//})(jQuery);
//判断一个元素是否存在
//两种方式
if ($("#none7").length > 0)
{ }
if ($("#none7")[0])
{ }
//基本选择器 #id \ .class \ element \ * \ selector1,selector2...
//层次选择器 $(ancestor descendant) ancestor所有后代descendant元素
//$("parent>child")
//$("prev+next") 等同于方法$("prev").next("next") 获取后一个元素
//$("prev~siblings") 等同于$("prev").nextAll("siblings") 获取prev后所有兄弟元素
//$("doc").siblings()方法是获取所有同辈元素，跟位置无关
//过滤选择器
//子元素过滤选择器nth-child(index/odd/even/equation),其中index是从1开始的。
//eq(index),index是从0开始的
//$(html) 根据传入的html标记字符串，创建一个dom对象，并将dom对象包装为jquery对象返回。
//含创建元素、文本、属性节点
//var $li1=$("<li>香蕉</li>");$("ul").append($li1);
//插入节点
//append() 向每个匹配的元素内追加内容
//prepend() 向每个匹配的元素内前置内容
//appendTo() 将所有匹配的元素追加到指定的元素内
//prependTo()
//after() 每个匹配的元素后插入内容。 <p>我爱你</p> $('p').after('<b>你好！</b>') 结果是 <p>我爱你</p><b>你好！</b>
//insertAfter() 将所有匹配的元素插入到指定元素后面。 <p>我爱你</p> $('<b>你好！</b>').insertAfter('p') 结果是 <p>我爱你</p><b>你好！</b>
//before()
//insertBefore()
//删除节点
//remove() 将匹配的元素及其子元素一起删除，返回的是已被删除的节点引用，删除后可再次使用
//empty() 清空元素中所有后代节点，可用于清空内容
//替换节点
//replaceWith() 将所有匹配的元素替换成指定的dom或html
//replaceAll() 用指定dom或html替换后面括号里的元素，与replaceWith相反
$(function () {
//$('p').replaceWith("<strong title='你喜欢的水果'>你喜欢的水果是?</strong>");//将$('p')替换为后面的内容
$("<strong title='你喜欢的水果'>你喜欢的水果是?</strong>").replaceAll('p');//用前面的内容替换$('p')
})
//克隆
$(function () {
$("ul li").click(function () {
//$(this).clone().appendTo($('ul'));
$(this).clone().appendTo('ul');//克隆点击li并追加到ul内尾
$(this).clone(true).appendTo('ul');//clone(true)复制元素的同时也复制元素所绑定事件
})
})
//包裹节点
$(function () {
//$("strong").wrap("<b></b>");//将每个stong用<b>包裹
//$("strong").wrapAll("<b></b>");//将strong组合并用<b>包裹,中间的元素依次提取靠后
$("strong").wrapInner("<b></b>");//将strong子元素或内容用<b>包裹
})
//addClass()
//removeClass()
//toggle()
//toggleClass()
//hasClass()
//css() 有单位
//元素的高度获取
//css("height")获取的高度与样式设置有关，有可能为‘anto’。获取的高度包含px $('p').css("color",red); $('p').css("fontSize","10px")采用骆驼写法，尽量用引号
//height()方法获取的是元素实际高度，与样式设置无关。不含px单位
//$('p').is(':visible') p元素是否显示
//jquery自定义方法ready(),hover(),toggle()
//hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave
//hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout")
//toggle(fn1,fn2,...,fnN)模拟鼠标连续点击事件
//toggle()还能切换元素的可见状态。$(this).toggle();
////x = 0;
////y = 0;
////$(document).ready(function () {
//// $("div.over").hover(
//// function () { $(".over span").text(x += 1); },
//// function () {$(".enter span").text(y += 1);}
//// )
////});
//获取事件对象
//$(p).bind("click",function(event){});//event就是事件对象
//event只有处理函数可以访问，当事件处理函数执行完后，就会被销毁
//事件冒泡
//停止事件冒泡 event.stopPropagation()
//$(p).bind("click",function(event){//函数内容;event.stopPropagation();});
//阻止元素的默认行为 event.preventDefault()
//例如超链接有默认跳转事件，提交按钮会提交表单等
//验证表单内容可用到
//$(function () {
// $("#sub").bind("click", function (event) {
// var username = $("#username").val();
// if (username == "")
// {
// //处理说明
// //...
// event.preventDefault();//阻止表单提交
// }
// })
//})
//如果同时想对事件对象停止冒泡和阻止默认行为可适用 return false;
//jquery不支持事件捕获，事件捕获是从上到下
//事件对象属性
//event.type() 获取事件类型
//event.stopPropagation() 停止冒泡
//event.preventDefault() 阻止默认行为
//event.target() 获取触发事件元素 event.target.href 连接地址
//event.relatedTarget() 获取相关元素
//event.pageX()//event.pageY() 获取光标相对页面的x和y坐标
//event.which() 鼠标单机事件中获取左中右键,在键盘中获取键盘的按键
//event.metaKey() 键盘事件中获取ctrl按键
//event.originalEvent() 指向原始的事件对象
//移除事件
//可以为同一元素绑定多个事件，也可以为多个元素绑定同一个事件 bind()
//unbind([type],[,data]) 移除事件绑定
//$('p').unbind(); //移除所有绑定
//$('p').unbind("click");//移除click事件
//$('p').unbind("click",fun1);//移除click的事件方法fun1
//one() 使用方式和bind()一致
//用于只绑定一次的事件，当处理函数被执行一次后将移除
//模拟操作
//$('p').trigger("click");模拟点击事件 简化写法$('p').click();
//trigger()不仅可以触发浏览器支持的事件，也能触发自定义事件
//trigger(type,[,data]) 第二个用于传递参数
//bind()可以绑定自定义事件
//$(function () {
// $("#sub").bind("Myclick", function (event, msg1, msg2) {
// alert(msg1 + msg2);
// })
// $("#sub").trigger("Myclick", ["我的自定义", "事件"]);
//})
//trigger()会触发浏览器的默认操作，如果只触发事件 不触发默认操作可用triggerHandler()
//triggerHandler("focus") 只触发focus中的事件方法，不会获得焦点
//jquery中的动画
//$("elment").hide(); 等价于 $("elment").css("display","none");
//jquery的动画效果应放在标准模式下，不然可能会引起动画抖动
//hide()和show() 同时改变元素的高宽度和透明度
//fadeIn()和fadeOut()改变元素的透明度，淡入淡出
//fadeIn()
//fadeOut() 在一定时间内 降低元素的透明度，直至消失
//slideUp()与slideDown()改变的是元素的高度
//slideUp() 元素由下至上缩短隐藏
//slideDown() 元素由上至下延伸显示
//自定义动画animate(params,speed,callback)
$(function () {
$(this).css("opacity", 0.5);//设置不透明度
$("#pannel").bind("click", function () {
//$(this).animate({ left: "500px" }, 3000);//向右移动500px
//$(this).animate({ left: "+=500px" }, 3000);//+=表示在当前位置累加
//$(this).animate({ left: "500px",height:"200px" }, 3000);//+=表示在当前位置累加
//动画先后顺序，写成多个animate即可
//$(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100%
// .animate({ top: "200px", width: "200px" }, 3000)
// .fadeOut("slow");
//执行一系列动作后，改变css样式，写字最后一个动画的回调方法中.
//这样就将css加入到了动画的队列中
$(this).animate({ left: "500px", height: "200px", opacity: 1 }, 3000)//向右逸动500的同时高度逐渐变为200 并设置不透明度为100%
.animate({ top: "200px", width: "200px" }, 3000, function () {
$(this).css("border", "5px solid blue");
});
})
//stop([clealQuene][,gotoEnd])
//clealQuene设为true，把当前元素尚未执行完的动画序列清空
//gotoEnd设为true，让正在执行的动画直接到达结束时的状态
$("#pannel").hover(function () {
$(this).stop()//停止当前动画，进入下一个动画序列
.animate({ left: "500px", height: "200px", opacity: 1 }, 3000);
},
function () {
$(this).stop(true)
.animate({ top: "200px", width: "200px" }, 3000);
}
)
//判断元素是否处于动画状态
//$("#pannel").is(":animated")
//其他动画方法
//toggle()切换元素的可见状态
//slideToggle()通过高度切换元素的可见性
//fadeTo() 设置匹配元素的不透明度，高宽度不会发生变化
//Javascript Math ceil()、floor()、round()三个函数的区别
//Math.ceil(12.2) 向上取整
//Math.floor(12.2) 向下取整
//Math.round(12.2) 四舍五入
//scrollTop:"50px" 控制滚动条
//表单验证
//表单中必填元素的验证，采用blur(function(){}).光标移除时触发
//要做到即时验证，可为表单元素绑定keyup()和focus()事件
$("form :input").blur(function () {
//失去焦点 验证处理
//多条件分支判断
}).keyup(function () {//键盘松开时触发
$(this).triggerHandler("blur");
}).focus(function () {//获取焦点时触发
$(this).triggerHandler("blur");//triggerHandler()只触发元素事件，不触发元素默认事件方法
})
})
//filter() 筛选出与指定表达式匹配的元素集合
//$('p').filter('.selected');//筛选出含有selected样式的p元素
//has() 保留包含特定后代的元素
//<ul>
// <li>list item 1</li>
// <li>list item 2
// <ul>
// <li>list item 2-a</li>
// <li>list item 2-b</li>
// </ul>
// </li>
// <li>list item 3</li>
// <li>list item 4</li>
//</ul>
//jQuery 代码: $('li').has('ul').css('background-color', 'red');//将包含ul的li背景色改为红色
//hasClass() 检查当前元素是否含有特定的类
//$(this)["removeClass"]("selected") 等价于 $(this).removeClass("selected")
//var thisEle=$(""#paras).css("font-size");//获取id为paras的字体大小
//var textFontSize=parseFloat(thisEle,10);//去掉字体的单位
//var unit=thisEle.slice(-2)//获取字体的单位
//index() 搜索匹配元素，并返回相应元素的索引值，从0开始
//jquery的cookie插件运用
//jquery的ajax. load(url [,data] [,callback])
//$("#divT").load("test.html")
//$("#divT").load("test.html .para")//加载test页面中样式为para的元素至divT中。para为URL参数
//load()中 若无data参数采用get方式传输，若有data参数采用post方式传输
//load() 回调函数callback 请求完成后，无论是否成功都会被调用
//load() 回调函数callback有三个参数
//$("#divT").load("test.html", function (responseText,textStatus,XMLHttpRequest) {
// //responseText 请求返回的内容
// //textStatus 请求状态：success,erro,notmodified,timeout4种
// //XMLHttpRequest XMLHttpRequest对象
//})
//$.get(url [,data] [,callback] [,type])
//callback在请求成功后才会触发与load()不一样
//type 请求返回内容的格式
//$(selector).serialize()
//
//serialize() 通过序列化表单值，创建 URL 编码文本字符串。包含自动编码
//serializeArray() 将dom元素序列化后，返回json格式
//表单元素必须使用name属性，才会被序列化到字符串中
//$.param() 用于对一个数组或对象按key/value进行序列化
//var obj = { a: 1, b: 2, c: 3 };
//var objstr = $.param(obj);
//alert(objstr);//a=1&b=2&c=3
//ajax全局事件方法。只要ajax请求发生，就会触发
//ajaxStart(callback) ajax请求开始时触发
//ajaxStop(callback) ajax请求结束时触发
//ajaxComplete(callback) 完成时
//ajaxError(callback) 发生错误时执行的函数，捕捉的错误最后一个参数传递
//ajaxSend(callback) 请求发送前执行
//ajaxSuccess(callback) 请求成功时触发
//ajaxStart(callback)示例 loading为div 内容为加载中...
//$("#loading").ajaxStart(function () {
// $(this).show();
//});
//$("#loading").ajaxStop(function () {
// $(this).hide();
//})
//使某个ajax请求不受全局方法影响。可将global设置为false
//$.ajax({
// url: "test.html",
// global:false //不触发全局事件
//})
//html lable的for属性规定与那个表单元素绑定.
//for="element_id" element_id为label 要绑定的元素的 id。
//当点击lable（male或female），绑定的单选按钮被选中
//<form>
// <label for="male">Male</label>
// <input type="radio" name="sex" id="male" />
// <br />
// <label for="female">Female</label>
// <input type="radio" name="sex" id="female" />
//</form>
//可以运用验证插件，cookie插件
//jQuery.extend() 可以用传入的参数覆盖默认值
//jquery的插件this是指jquery对象
//封装jquery对象方法的插件
; (function ($) {
$.fn.extend({
"color": function (value) { },
"border": function (value) { },
"backgroud": function (value) { }
})
})(jQuery)
//封装全局函数插件
; (function ($) {
$.extend({
ltrim: function (text) {
return (text || "").replace(/^\s+/g, "");
//(text||"")用于防止传入尽量的text这个字符串变量处于未定义状态
//如果text为undefined,则返回"" 否则返回text
},
rtrim: function (text) {
return (text || "").replace(/\s+$/g, "");
}
});
})(jQuery);
$("#trimTest").val(
jQuery.trim(" text ") + "\n" +
jQuery.ltrim(" text ") + "\n" +
jQuery.rtrim(" text ")//自定义全局函数插件的使用
);
</script>
</head>
<body>
<input name="none2" />
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input class="cls1" name="none" />
<input class="cls1" name="none5" />
<input id="none6" class="cls1" name="none6" />
<input name="none3" />
<input id="none7" type="text" value="none7" name="none7"/>
<input id="Button1" type="button" value="button" /><br />
<input type="checkbox" id="cr" /><label for="cr" >我已阅读制度</label>
<input id="Button2" type="button" value="button" /><br />
<ul>
<li>菠萝</li>
<li>雪梨</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
<p title="你喜欢的水果"><strong>你喜欢的水果是?</strong></p>
<input name="none8" value="dddd" />
<strong title='你喜欢的水果'>你喜欢的水果是?</strong>
<div>分隔</div>
<strong title='你喜欢的水果'>你喜欢的水果是?</strong>
<div id="pannel"></div>
</body>
</html>
浙公网安备 33010602011771号