赵龙 全栈之路

jQuery 小总结

| Comments

jQuery 是一套最多人使用的 JavaScript 函式库,可以实现各种网页前端效果,它的作用就是操控以 app/views/pages/jquery_1.html.erb 为代表的 HTML 文件

app/views/pages/jquery_1.html.erb
<p>
  <a id="my-click">Click Me</a>
</p>

<div id="foo" style="border: 1px solid red;">
  <p>bar</p>
</div>

<script>
  $("#my-click").click(function(){
    $("#foo").html('<h1>zoo</h1>');
  })
</script>
  • <script>...</script> 包起来的部分就是写 JavaScript 的地方 这个钱号 $ 等同于 jQuery
  • $("#my-click") 是 jQuery 的选择器用法,会挑出 id 是 my-click 的元素,在这里就是指 Click Me 的超连结。在 HTML 上 id 是唯一的,不能有重复的 id。
  • .click( function(){...} ) 会绑订一个点击(click)事件在该元素上面,当用户点击这个元素时,就会执行里面的 function
  • $("#foo").html('<h1>zoo</h1>') 会把 #foo 这个元素的内容置换成 <h1>zoo</h1>

html 元素内容替换
text 文字替换
prepend 把内容插在指定元素里面的最前面
append 把内容插在指定元素里面的最后面
before 把内容插在指定元素的前面
after 把内容插在指定元素的后面
show 显示隐藏元素内容,hide 隐藏元素内容,突然式
fadeOutfadeIn ,效果同上,渐变式, fade渐变
slideUpslideDown ,效果同上,滑入式, slide滑入
toggle 搭配 hover 事件,可以实现:鼠标移过去自动打开和隐藏内容
remove 移除元素内容
replaceWith 会连同指定元素一起移除掉,因此整个 #foo 包含 <div> 都一起被换掉了
addClass 增加元素的 class 属性 和 removeClass 移除元素的 class 属性

Comments

comments powered by Disqus