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> ***** ~~~