2018-02-05(jQuery)

1.

选择器

$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素 在线实例
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 在线实例
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 在线实例
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 在线实例
$("tr:even") 选取偶数位置的 <tr> 元素 在线实例
$("tr:odd") 选取奇数位置的 <tr> 元素

2.

事件:

鼠标事件键盘事件表单事件文档/窗口事件
click   //点击元素事件 keypress   //键被按下 submit  //提交 load   //加载
dblclick  //双击元素 keydown  //键按下的过程 change  //改变内容 resize   //重置窗口
mouseenter  //鼠标移入 keyup  // 键被松开 focus scroll   //滚动次数
mouseleave   //鼠标移出   blur unload   //

3.

3.1

click() //点击

dblclick() //双击

mouseenter() //鼠标移入

mouseleave() //鼠标移开

mousedown() //按下鼠标

mouseup() //松开鼠标

3.2。隐藏、显示

hide() 和 show() //隐藏、显示

toggle() //隐藏和显示

3.3。淡入、淡出

fadeIn()  //淡入

fadeOut() // 淡出

fadeToggle() //淡入和淡出

fadeTo() //颜色变淡

3.4.

slideDown() //滑出

$(document).ready(function(){
  $("#flip").click(function(){
  $("#panel").slideDown("slow");
  });
});

slideUp() //滑进

slideToggle()  //滑出、滑进

3.5.动画

3.5.1.animate()  //创建自定义动画

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      '100px'
    });
  });
});  // 使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right

3.5.2

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
   });
});  // 相当于滑入、滑出

3.5.3

$(document).ready(function(){
  $("body").mouseenter(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'55px'},"slow");
  div.animate({fontSize:'25px'},900);
  });
});  // 一步步改变样式

原文地址:https://www.cnblogs.com/jy13638593346/p/8418805.html