jQuery基础笔记

jQuery基础笔记

第一步: 

例子一:


分别有3种写法,作用都是一样的
$("div")
$(".b")
$("#a")

例子二: 
 


 

  测试
 


  点这里
 


 

代码:

效果:
只有点

的范围才触发事件,也可以这么写:$("div > p ")或者$("div  p ")

例子三:

John Resig

George Martin

Malcom John Sinclair

J. Ohn

代码:
$("div:contains('John')") .css("background", "#00FEEE");

例子四:


代码:
$("input[name='newsletter']").css("background", "#00FEEE");
$("input[name='newsletter']").attr("checked", true);


进阶例子:漂亮效果的表格




 
   
   
   
 


 
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 
 
   
   
   
 

姓名年龄Email
张三11ABC@gmail.com
张三11ABC@gmail.com
张三11ABC@gmail.com
张三11ABC@gmail.com
张三11ABC@gmail.com
张三11ABC@gmail.com

代码:
 $(".stripe tr")
 .mouseover(function(){$(this).addClass("over");})
 .mouseout(function(){ $(this).removeClass("over");})
 $(".stripe tr:even").addClass("alt");


需要样式表配合:


进阶例子:点击控件变色


Name:


Password:


Textarea:


代码:
$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("ie_focus")}).blur(function(){$(this).removeClass("ie_focus")});


需要样式表配合:
    .redborder{border:2px dashed #ff0000 }
   body { font: .9em/1.5 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; }
  form { width: 20em; margin: 4em auto; }
  dt { clear: left; float: left; }
  dd { clear: right; margin-left: 6em; }
  input, textarea { width: 12em; border: 1px solid #ccc; }
  input:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }
  .ie_hover { background: #ffc; }
  .ie_focus { border: 1px solid #f00; background: #fcc; }

 

你可能感兴趣的:(jQuery基础笔记)