jQuery的小知识

//单击弹框
 $(document).ready(function() {
     $("div").click(function(){
       alert("Hello World!");
     })
 })
 //页面加载加一个样式,点击div移除这个样式
 $(document).ready(function(){
  $("div").addClass("aaa");
  $("div").click(function(){$(this).removeClass("aaa")});
  }
 )
 //当鼠标单击id为div1的元素时,给此元素设置样式
 $(document).ready(function(){
   $("#div1").click(function(){
         $(this).css("border","5px dashed red");
     })
 });
 //当鼠标单击id为div1的元素时,给此元素设置样式,并弹框显示样式值(即显示 5px dashed red)
 $(document).ready(function(){
   $("#div1").click(function(){
                 $(this).css("border","5px dashed red");
   alert($(this).css("border"));
     })
 });
 //单击id为div1的元素时,变换样式
 //border的三个属性border-width border-style border-color分开写都得写
 $(document).ready(function(){
     $("#div1").click(function(){
        $(this).css({ color:"red", background: "blue" }); 
     })
 });
 $(document).ready(function(){
     $("#div1").click(function(){
        $(this).css({ "border":"5px dashed red", "background-color":"blue" }); 
     })
 });
 //单击id为div1的元素时，改变其宽度和高度
 $(document).ready(function(){
     $("#div1").click(function(){
        $(this).height("100px"); 
     $(this).width("150px")
     })
 });
 //设置成的渐入和渐出 fadeOut渐出  fadeTo改变透明度 fadeIn渐入  
 //第一个div1为触发着的id，第二个div1为要渐入和渐出的层的id
 //onclick事件为click onmouseover事件为mouseover
 $(document).ready(function(){
  $("#div1").click(function(){
     $("#div1").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
     })
  $("#div2").mouseover(function(){
     $("#div2").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
     })
     $("#div3").click(function(){
     $("#div31").fadeIn("slow",function(){alert("是不是下面这个层慢慢出现了！")});
     })
 });
 //显示滑动效果
 $(document).ready(function(){ 
     $("#div3").click(function(){
  $("#div2").slideUp("normal",function(){alert("滑动隐藏了！")});
     $("#div31").slideDown("normal",function(){alert("滑动显示了！")});
  $("#div31").slideToggle("normal",function(){alert("显示则滑动隐藏，隐藏则滑动显示")}); 
     })
 });
 //一些属性选择器
 第一种根据属性选择E[@attr]
 $("[@title]").click()..........
 即选择所有元素内 属性带有title的元素
 <li class="aaaa" title="ttt">li-1</li>
 <li title="fffff">li-2</li>
 <div class="aaaa" title="ttt">li-1</div>
 <div title="fffff">li-2</div>
 $("div[@title]").click()..........
 选择所有div标签下的所有带title的元素
 <div class="aaaa" title="ttt">li-1</div>
 <div title="fffff">li-2</div>

第二种根据属性值选择E[@attr=val]
 $("div[@title=ttt]").click()................
 选择div下所有title属性等于ttt的元素
 <div class="aaaa" title="ttt">li-1</div>
 如果是 $("[@title=ttt]").click()................
 所有元素下属性title等于ttt的元素
 <li class="aaaa" title="ttt">li-1</li>
 <div class="aaaa" title="ttt">li-1</div>

第三种根据属性值开始字母选择E[@attr^=val]
 $("div[@title^=t]").click()................
 所有div元素下所有属性title值是以t为开头的元素

第三种根据属性值开始字母选择E[@attr$=val]
 $("div[@title$=t]").click()................
 所有div元素下所有属性title值是以t为结尾的元素

第三种根据属性值包含字母选择E[@attr*=val]
 $("div[@title*=t]").click()................
 所有div元素下所有属性title值是包含t的所有元素

第三种根据多个属性选择E[@attr=val][@attr=val]
 $("div[@title=ttt][@class=aaaa]").click()................
 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

//load用法 当单击id为div3的元素时,将把myload.html的内容加载到id为div31的层里(只能加载到div里,会覆盖原来div的东西)
 $(document).ready(function(){ 
     $("#div3").click(function(){
     $("#div31").load("myload.htm"); 
     })
 });

$("body").load("test.html #a"); //加载到页面上

//load用法 当单击id为div3的元素时,将把myload.html里id为mydiv的元素的内容加载到id为div31的层里
 $(document).ready(function(){ 
     $("#div3").click(function(){
     $("#div31").load("myload.htm #mydiv"); 
     })
 });