作为同名为设计汪,也欲懂点前端知识。HTML/CSS
是无与伦比基础之,为了重新好的互动作用,JavaScript也亟需效法一些,jQuery
作为同一栽强大易用的js 框架,被聊伙伴等广为推荐。

上学资源建议直接扣W3school
的教程,若无可知翻墙,也足以直接看这个镜像网站:
http://w3schools.bootcss.com/

1. 基础定义:

骨干句法:

$(selector).action

理解:

  • “$” 定义 jQuery
  • (selector)用来访问 HTML 元素
  • action( ) 用来操作元素
例子:

1.使用CSS选择器

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有的<p> 标签元素
$(".test").hide() - 隐藏所有包含"test" 类的元素
$("#test").hide() - 隐藏所有ID为"test" 的元素

2.戒以文书加载成功之前jQuery 启动:

$(document).ready(function(){//jQuery ...});

2. 选择器

  • 签选择器
  • id选择器(#eg)
  • class选择器(.eg)
  • 其他:
    • “ * ” 选择任何
    • “this” 选择时HTML 元素
    • $("p.intro")选择具有p 标签下“intro” 类的要素
    • $("p:first")挑第一独p 标签
    • $("ul li:first")选第一个ul 的第一单li
    • $("ul li:first-child")摘每一个ul 下之第一独li
    • $("[href]")选料具有发生href 属性的素
    • $("a[target='_blank']")挑选所有a 标签下的target值为 _blank
      的元素
    • $("a[target!='_blank']")选取所有a 标签下的target值未为
      _blank 的元素
    • $(":button")挑有<button><input>type= button
    • $("tr:even")选有偶数的tr
    • $("odd:even")择有奇数的 tr

3. 事件

鼠标事件 键盘事件 表单事件 文件/窗口事件
click keypress submit load
dbclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

例子:

$(document).ready(function(){ 
  $("p").click(function(){ 
    $(this).hide();
   });
// 鼠标点击 

  $("input").focus(function(){ 
    $(this).css("background-color", "#cccccc");
   }); 
  $("input").blur(function(){ 
    $(this).css("background-color", "#ffffff");
   });
// 表单获取/失去焦点 

  $("p").on({ 
    mouseenter: function(){ $(this).css("background-color", "lightgray"); }, 
    mouseleave: function(){ $(this).css("background-color", "lightblue"); }, 
    click: function(){ $(this).css("background-color", "yellow"); } 
   });
// 鼠标事件
});

4. 赶上的另小题目

时不时于网页遭到来看如此虾面这样同样段子代码,其实是百度统计的东东。

<script>
  var _hmt = _hmt || [];
  (function() {var hm =  document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?10701d9b4e040e37e58bee7e1ec1d252";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

相关文章

网站地图xml地图