Rumah hujung hadapan web tutorial js 那些年,我还在学习jquery 学习笔记_jquery

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

May 16, 2016 pm 05:55 PM
nota belajar

原来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的日子。
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

8 plugin susun atur halaman jquery yang menakjubkan 8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

Bina Aplikasi Web Ajax anda sendiri Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Kandungan kotak beban secara dinamik menggunakan ajax Kandungan kotak beban secara dinamik menggunakan ajax Mar 06, 2025 am 01:07 AM

Tutorial ini menunjukkan membuat kotak halaman dinamik yang dimuatkan melalui AJAX, membolehkan Refresh Instant tanpa tambah nilai halaman penuh. Ia memanfaatkan JQuery dan JavaScript. Fikirkannya sebagai loader kotak kandungan gaya Facebook tersuai. Konsep Utama: Ajax dan JQuery

10 JQuery Fun and Games Plugin 10 JQuery Fun and Games Plugin Mar 08, 2025 am 12:42 AM

10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game

Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScript Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScript Mar 06, 2025 am 01:18 AM

Perpustakaan JavaScript ini memanfaatkan Window.Name Property untuk menguruskan data sesi tanpa bergantung pada kuki. Ia menawarkan penyelesaian yang mantap untuk menyimpan dan mengambil pembolehubah sesi di seluruh pelayar. Perpustakaan menyediakan tiga kaedah teras: sesi

JQuery Parallax Tutorial - Latar Belakang Header Animasi JQuery Parallax Tutorial - Latar Belakang Header Animasi Mar 08, 2025 am 12:39 AM

Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun

See all articles