无为清净楼资源网 Design By www.qnjia.com
原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧
一、$符号
1、选择器
可以选择html标签,也可选择ID,Class等
如下:
复制代码 代码如下:
<script type="text/javascript">
$(
function() {
$("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇数,even:偶数,nth-child:匹配其父元素下的第N个子或奇偶元素,从1开始
var obj = $("h2 a"); //得到h2下面的a,返回的是一个数组
for (var i = 0; i < obj.length; i++) {
obj[i].innerHTML = i.toString();
}
var obj1 = $("#demo");
obj1.append("Demo_Id");
var obj2 = $(".Class"); //得到的是一个数组
alert(obj2);
$("div ul li:has(a)").addClass("Two"); //得到里中有a的标符添加一个Class="Two"
$("li:lt(2)").addClass("one"); //得到前三个li,添加一个Class="one",下标是从0开始的
$("p>span").addClass("Two"); //得到p下的span,parent>child
}
)
</script>
2、得到标记中的属性
复制代码 代码如下:
var sTitle = $("p>span").attr("Title"); //得到标记中的属性值
$("p>a").text(sTitle);//设置值,若是用text()得到值,则是得到的文本,不包含html
3、设置属性
复制代码 代码如下:
$("button:gt(0)").attr("disabled", "disabled"); //得到第一个button后的button,然后设置它们的disable属性为不可用,没有这个属性就返回undefined
$("img").attr({ src: "test.jpg", alt: "Test Image" });
3.1、删出属性
$("img").removeAttr("src");
4、修改Class,如果存在(不存在)就删除(添加)一个类。
复制代码 代码如下:
$(
function() {
$("div>p").mouseover(
function() {
$(this).toggleClass("HightLight");//修改样式class
}
);
}
4.1、移出Class
$("p").removeClass("selected");
4.2、添加Class
$("p").addClass("selected");
5、图片的复制
$("img:eq(0)").clone().appendTo($("p")); //得到第一张图片
6、事件绑定,可以绑定多个相同的事件
复制代码 代码如下:
$(function() {
$("img").bind("click", function() { //绑定事件
alert("你点啊!1");
});
$("img").bind("click", function() { //绑定事件
alert("你点啊!2");
});
})
7、移出事件
复制代码 代码如下:
$(function() {
$("input[type=button]").click(function() {
$("img").unbind("click", eventImg);//unbind来移出方法
alert("移出事件!");
});
})
8、元素的显示和隐藏
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#demobtnF").click(function() {
$("#p_btn").show(); //显示
});
$("#demobtn").click(function() {
$("span:first").hide();//隐藏
});
})
</script>
渐入渐出的效果:在show(),与hide()方法上传一个时间参数,从而得到淡入淡出的效果
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$("#imgs").show(10000);
});
$("#Button2").click(function() {
$("#imgs").hide(5000);
});
})
</script>
复制代码 代码如下:
<input id="Button1" type="button" value="Show" />
<input id="Button2" type="button" value="hide" />
<hr />
<img id="imgs" src="/UploadFiles/2021-04-02/27m03.jpg"><hr />
二、淡入淡出的实现方法
1、fadeIn()与fadeOut():使用方法与show()、hide()一样,效果更好
如下:
复制代码 代码如下:
$("#Button3").click(function() {
$("#imgs").fadeIn(10000);
});
$("#Button4").click(function() {
$("#imgs").fadeOut(5000);
});
2、幻灯片效果-由slideUp()与slideDown()方法实现
复制代码 代码如下:
$("#Button1").click(function() {
$("#imgs").slideUp(10000);
});
$("#Button2").click(function() {
$("#imgs").slideDown(5000);
});
三、Jquery功能函数
1、浏览器的检测$.browser, 如下:
复制代码 代码如下:
if ($.browser.msie) return alert("IE");
if ($.browser.safari) return alert("safari");
if ($.browser.mozilla) return alert("mozilla");
if ($.browser.opera) return alert("opera");
2、盒子模型 $.boxModel 如下:
alert($.boxModel ? "standard" : "IE");
3、处理javascript对象 $.each(arr,function) //对数组的每个对象用function函数处理
如下:
复制代码 代码如下:
var aArr = ["one", "two", "three"];
$.each(aArr, function(iNum, value) {
alert(iNum + "," + value);
});
$.grep(Arr,funtion(value)):过滤
示例:
复制代码 代码如下:
var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var DemoArr = $.grep(aArray, function(value) {
return value > 4;
});
document.write(DemoArr.join());
$.map(Array,function(value,index))
本文全部来源于那些年的学习笔记。
总结
Jquery库中有很多函数,还有一些,特别是Jquery里的Ajax,是非常重要的,此文以回忆那些年学习Jquery的日子。
一、$符号
1、选择器
可以选择html标签,也可选择ID,Class等
如下:
复制代码 代码如下:
<script type="text/javascript">
$(
function() {
$("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇数,even:偶数,nth-child:匹配其父元素下的第N个子或奇偶元素,从1开始
var obj = $("h2 a"); //得到h2下面的a,返回的是一个数组
for (var i = 0; i < obj.length; i++) {
obj[i].innerHTML = i.toString();
}
var obj1 = $("#demo");
obj1.append("Demo_Id");
var obj2 = $(".Class"); //得到的是一个数组
alert(obj2);
$("div ul li:has(a)").addClass("Two"); //得到里中有a的标符添加一个Class="Two"
$("li:lt(2)").addClass("one"); //得到前三个li,添加一个Class="one",下标是从0开始的
$("p>span").addClass("Two"); //得到p下的span,parent>child
}
)
</script>
2、得到标记中的属性
复制代码 代码如下:
var sTitle = $("p>span").attr("Title"); //得到标记中的属性值
$("p>a").text(sTitle);//设置值,若是用text()得到值,则是得到的文本,不包含html
3、设置属性
复制代码 代码如下:
$("button:gt(0)").attr("disabled", "disabled"); //得到第一个button后的button,然后设置它们的disable属性为不可用,没有这个属性就返回undefined
$("img").attr({ src: "test.jpg", alt: "Test Image" });
3.1、删出属性
$("img").removeAttr("src");
4、修改Class,如果存在(不存在)就删除(添加)一个类。
复制代码 代码如下:
$(
function() {
$("div>p").mouseover(
function() {
$(this).toggleClass("HightLight");//修改样式class
}
);
}
4.1、移出Class
$("p").removeClass("selected");
4.2、添加Class
$("p").addClass("selected");
5、图片的复制
$("img:eq(0)").clone().appendTo($("p")); //得到第一张图片
6、事件绑定,可以绑定多个相同的事件
复制代码 代码如下:
$(function() {
$("img").bind("click", function() { //绑定事件
alert("你点啊!1");
});
$("img").bind("click", function() { //绑定事件
alert("你点啊!2");
});
})
7、移出事件
复制代码 代码如下:
$(function() {
$("input[type=button]").click(function() {
$("img").unbind("click", eventImg);//unbind来移出方法
alert("移出事件!");
});
})
8、元素的显示和隐藏
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#demobtnF").click(function() {
$("#p_btn").show(); //显示
});
$("#demobtn").click(function() {
$("span:first").hide();//隐藏
});
})
</script>
渐入渐出的效果:在show(),与hide()方法上传一个时间参数,从而得到淡入淡出的效果
复制代码 代码如下:
<script type="text/javascript">
$(function() {
$("#Button1").click(function() {
$("#imgs").show(10000);
});
$("#Button2").click(function() {
$("#imgs").hide(5000);
});
})
</script>
复制代码 代码如下:
<input id="Button1" type="button" value="Show" />
<input id="Button2" type="button" value="hide" />
<hr />
<img id="imgs" src="/UploadFiles/2021-04-02/27m03.jpg"><hr />
二、淡入淡出的实现方法
1、fadeIn()与fadeOut():使用方法与show()、hide()一样,效果更好
如下:
复制代码 代码如下:
$("#Button3").click(function() {
$("#imgs").fadeIn(10000);
});
$("#Button4").click(function() {
$("#imgs").fadeOut(5000);
});
2、幻灯片效果-由slideUp()与slideDown()方法实现
复制代码 代码如下:
$("#Button1").click(function() {
$("#imgs").slideUp(10000);
});
$("#Button2").click(function() {
$("#imgs").slideDown(5000);
});
三、Jquery功能函数
1、浏览器的检测$.browser, 如下:
复制代码 代码如下:
if ($.browser.msie) return alert("IE");
if ($.browser.safari) return alert("safari");
if ($.browser.mozilla) return alert("mozilla");
if ($.browser.opera) return alert("opera");
2、盒子模型 $.boxModel 如下:
alert($.boxModel ? "standard" : "IE");
3、处理javascript对象 $.each(arr,function) //对数组的每个对象用function函数处理
如下:
复制代码 代码如下:
var aArr = ["one", "two", "three"];
$.each(aArr, function(iNum, value) {
alert(iNum + "," + value);
});
$.grep(Arr,funtion(value)):过滤
示例:
复制代码 代码如下:
var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var DemoArr = $.grep(aArray, function(value) {
return value > 4;
});
document.write(DemoArr.join());
$.map(Array,function(value,index))
本文全部来源于那些年的学习笔记。
总结
Jquery库中有很多函数,还有一些,特别是Jquery里的Ajax,是非常重要的,此文以回忆那些年学习Jquery的日子。
标签:
学习笔记
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR(引进版)【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大,至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大,至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】