Heim > Web-Frontend > js-Tutorial > Hauptteil

那些年,我还在学习jquery 学习笔记_jquery

WBOY
Freigeben: 2016-05-16 17:55:32
Original
875 Leute haben es durchsucht

原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧
一、$符号
  1、选择器
   可以选择html标签,也可选择ID,Class等
   如下:

复制代码 代码如下:

 

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、元素的显示和隐藏
复制代码 代码如下:



渐入渐出的效果:在show(),与hide()方法上传一个时间参数,从而得到淡入淡出的效果   
复制代码 代码如下:



复制代码 代码如下:





log



二、淡入淡出的实现方法
 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的日子。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!