按键改变元素背景颜色 链式编程的原理 评分案例 each方法的使用
生活随笔
收集整理的這篇文章主要介紹了
按键改变元素背景颜色 链式编程的原理 评分案例 each方法的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
按鍵改變元素背景顏色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 800px;height: 600px;background-color: gray;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 用戶在頁面按鍵,可以改變div的背景顏色$(document).keydown(function(e){// console.log(e.keyCode);switch(e.keyCode){case 65:$("#dv").css("backgroundColor","red");break;case 66:$("#dv").css("backgroundColor","green");break;case 67:$("#dv").css("backgroundColor","blue");break;case 68:$("#dv").css("backgroundColor","pink");break;}});});</script> </head> <body> <div id="dv"></div></body> </html>鏈式編程的原理
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 為按鈕注冊點擊事件$("#btn").click(function(){// console.log($(this).val("哈哈").val("嘎嘎"));// 對象.方法(); 調用,如果返回來的還是對象,那么可以繼續的調用方法});});function Person(age){this.age = age;this.sayHi = function(){if(txt){console.log("您好啊:" + txt);return this;}else{ console.log("您好啊...");return this;}};this.eat = function(){console.log("中午就吃了一個饅頭和咸菜");return this;};}// 對象var per = new Person(10);// var ss = per.sayHi();// ss.eat();// per.sayHi().eat().sayHi();per.sayHi("嘎嘎").eat();// 方法();----獲取這個值,如果.方法(值)---->當前的對象// val();----返回的是value屬性的值,val('fdfs');----當前的對象</script> </head> <body> <input type="button" value="顯示效果" id="btn"></body> </html>評分案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}ul {list-style: none;}li {float: left;font-size: 50px;color: red;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 獲取所有的li標簽$(".comment>li").mouseenter(function(){ // 進入// 當前的li是實心的五角星,前面的li也是實心的五角星,// 鼠標后面的li是空心的五角星$(this).text("★").prevAll("li").text("★");}).click(function(){ // 點擊// 做一個記錄// 點哪個li就為這個添加一個自定義屬性,作為標識,但是其他的// li中的這個自定義屬性要刪除,$(this).attr("index","1").siblings("li").removeAttr("index");}).mouseleave(function(){ // 離開// 鼠標離開的時候,獲取那個帶有index自定義屬性的li,然后,改變這個// li中的五角星,同時前面的五角星也是實心的,同時后面的五角星都是// 空心// 先干掉所有的li中的實心的五角星$(".comment>li").text("☆");$(".comment>li[index=1]").text("★").prevAll("li").text("★");});});</script> </head> <body><ul class="comment"><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul> </body> </html>each方法的使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}li {width: 100px;height: 100px;background-color: green;margin-right: 10px;float: left;}</style><script src="jquery-1.12.1.js"></script><script>// 隱式迭代----內部幫助我們循環遍歷做操作// 每個元素做不同操作的時候// each方法,幫助我們遍歷jQuery的對象// 獲取所有的li,針對每個li的透明進行設置$(function(){$("#uu>li").each(function(index,ele){// console.log(arguments.length);// 參數1:索引,參數2:對象// console.log(arguments[0]+"===="+arguments[1]);// 每個li的透明度不一樣var opacity = (index+1)/10;$(ele).css("opacity",opacity);});});// each方法就是用來遍歷jQuery對象的,但是,里面的每個對象最開始都是DOM對象// 如果想要使用jQuery的方法,需要把DOM對象轉jQuery對象</script> </head> <body> <ul id="uu"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul></body> </html>?
總結
以上是生活随笔為你收集整理的按键改变元素背景颜色 链式编程的原理 评分案例 each方法的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 事件冒泡及阻止事件冒泡 事件的触发 事件
- 下一篇： 多库共存 包装集的问题 点击按钮创建一个