5.4 jQuery引用 · 前端學習筆記

jquery支持所有的css選擇器 * * * 操作流程 1.打開網站 ![](https://box.kancloud.cn/43d285fd37ca60ca631a40b8d80c12e0_1027x342.png) 2點擊jquery .![](https://box.kancloud.cn/d4dfe8d6367a2c0bc2a1e22e6a00d7ca_358x159.png) 3.獲取粘貼在title的上方 ![](https://box.kancloud.cn/9a7af374d0bfe6ff91dfa8ee05985360_640x145.png) * * * ### 獲取dom節點 ~~~ var test = $('#test'); ~~~ ![](https://box.kancloud.cn/6e3bb9723a2b3387cf697a34e8fcb364_168x86.png) ~~~ test.click(function(){ console.log("hello world") ~~~ 事件 ~~~ $(selector).css({}) $(selector).html() ~~~ 改變樣式與內容 ~~~ test.click(function(){ $(this).css({color:"red",backgroundColor:"yellow"}).html("change") }) ~~~ * * * 點擊變色 ~~~ <style> li{ cursor: pointer; } .active{ color:red; //active類顯示紅色 } </style> </head> <body> <ul> <li class="active">手機</li> <li>平板</li> <li>電腦</li> </ul> <script> /* 點擊li,讓當前項添加active-class,讓兄弟項移除active-class */ $("li").click(function(){ $(this).addClass('active').siblings().removeClass('active') }) // siblings ：獲取兄弟元素 </script> </body> ***** ~~~