當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

十七、去年jQuery的笔记

發布時間：2024/10/8 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了十七、去年jQuery的笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author：Runsen
@Date：2019/05/22

@updated Date：2020/05/30

我是非常反對用JQ的，原生的JS效果其實比JQ差不了太多，最近還是整理下JQ的筆跡吧

菜鳥教程

文章目錄

jQuery
導入JQ
JS和JQ的轉化
- $() 定義JQ對象
- each
- Jq操作屬性
- 操作樣式
事件
動畫
animate
stop
delay

jQuery

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

JQ是JS寫的插件庫，說白了，就是一個js文件

導入JQ

JS和JQ的轉化

$() 定義JQ對象

each

<body><ul><li>001</li><li>002</li><li>003</li><li>004</li></ul><script src="jquery.js"></script><script>// var $li = $("ul li");$("ul li").each(function (i) {//第一個參數默認是序號/小標// this.innerHTML = "我是第"+i+"個";$(this).html("我是第"+i+"個");})</script> </body>

Jq操作屬性

<body><div id="box"><p class="box">1</p><p>2</p><p class="wrap">3</p></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"><script>/*attr 設置/獲取標簽屬性prop 設置/獲取標簽屬性廢除removeAttr() 移除標簽屬性removeProp() 廢除addClass 加class名字removeClass傳class 移除你傳的那個沒有移除全部toggleClass 有就刪沒有則加操作class類名jq jshtml() innerHTMLtext() innerTextval() value在jq里面，設置某個值的時候，一般自帶遍歷獲取某個值的時候，一般獲取第一個*/var $box = $("#box");// alert($box.attr("id"));//讀操作$box.attr("class","show");//寫操作$box.removeAttr("class");$("p").eq(1).addClass("box show");// $("p").eq(1).removeClass();$("p").eq(1).removeClass("show");$("p").toggleClass("wrap");alert($("p").html());</script> </body>

操作樣式

就是改變類名來改變樣式

事件

<body><ul id="box"><li>001</li><li>002</li><li>003</li><li>004</li></ul><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>/*jquery里面的事件都是函數形式的，去掉on的那種原理上事件都是事件綁定的形式而不是賦值的形式jquery事件綁定、解綁所有事件的添加都是綁定的形式可以通過on來添加事件*/var oBox = document.querySelector("#box");/*oBox.onclick = function () {alert(1);};oBox.onclick = function () {alert(2);};*//*$("#box").click(function () {alert(1);});$("#box").click(function () {alert(2);})*///on綁定單個事件/*$("#box li").on("click",function () {alert($(this).index());//index()在jq里面是方法對應的是你的下標});*///on綁定多個事件/*$("#box").on({"click": function () {console.log(1);},"mouseenter": function () {console.log(2);},"mouseleave": function () {console.log(3);}});*///$("#box").off("mouseenter");//移除滿足條件的事件//$("#box").off();//移除事件// $("#box").hover(function () {// console.log(5);//移入移出都執行這個函數// });$("#box").hover(function () {console.log(5);//移入函數},function () {console.log(9);//移出函數});</script> </body>

動畫

<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box{width: 200px;height: 200px;background: #aa8899;}</style> </head> <body> <div id="box"></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script>/*不傳參瞬間顯示隱藏傳一個數字參數，代表毫秒，改變寬、高、透明度showhidetoggle默認時間300毫秒改變透明度fadeInfadeOutfadeTo(1000,0.1) 可以把透明度設置一個值，時間參數不能省略默認時間300毫秒改變高度slideDownslideUpslideToggle 改變高度這三組，不僅僅可以接受一個數字參數，能接受的參數有：* number / string 代表動畫時間（可缺省）毫秒數 / （"fast" "normal" "slow"）* string 代表運動曲線（可缺省）* function 代表回調函數（可缺省）*/var $box = $("#box");$(document).click(function () {// $box.toggle(2000);// $box.fadeTo(2000,0.2);// $box.slideToggle(2000);});var off = true;$(document).click(function () {if(off){// $box.hide(2000);// $box.fadeOut(3000);$box.slideUp(1000);}else{// $box.show(2000);// $box.fadeIn(3000);$box.slideDown(1000);}off = !off;})</script> </body>

animate

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box{width: 200px;height: 200px;background: #33aa75;}</style> </head> <body> <div id="box"></div><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>/*animate傳參：* obj 必傳 { }格式代表的變化的屬性和目標值數值變化* number/string 可缺省代表毫秒數或者三個預設好的值默認300* string 可缺省，代表運動曲線，默認jQuery提供"linear" 和 "swing"* function 可缺省，代表動畫結束后的回調函數 */var $box = $("#box");$box.animate({"width": "400px","height": "400px"}); </script> </body> </html>

stop

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}li{list-style: none;float: left;height: 50px;line-height: 50px;padding: 0 10px;background: #aa8899;margin-right: 5px;}</style> </head> <body><ul id="box"><li>佚名</li><li>老譚</li><li>空大</li><li>明明</li><li>王潔林</li><li>無處不風景</li></ul><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script><script>/*stop清空動畫隊列，可以接受兩個布爾值參數第一個不用管第二個決定是否瞬間到達隊列終點，true 到 false(默認) 不到*/$("#box li").hover(function () {$(this).stop(true,false).animate({"height": "500px"})},function () {$(this).stop(true,false).animate({"height": "50px"})})</script> </body> </html>

delay

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}div{width: 200px;height: 200px;background: #33aa75;}</style> </head> <body> <div id="box"></div> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script>/*delay 只對動畫有用*//*$(document).click(function () {// $("#box").delay(3000).fadeOut(2000);$("#box").delay(3000).css("width","300px");})*/$("#box").delay(3000).queue(function () {$("#box").css("width","300px");}) </script> </body> </html>

更多的

http://jquery.cuishifeng.cn/

https://www.runoob.com/jquery/jquery-tutorial.html

總結

以上是生活随笔為你收集整理的十七、去年jQuery的笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： leetcode刷题 60 61
下一篇：问一下，江苏实木家具板哪个品牌的好？