03.js的jq框架

1.介绍 jq 2006 john创建 write less do more

其他框架 bootstrap zepto ext YUI…

2.优点

体积小 100kb(通过服务器gzip压缩)
强大的选择器
浏览器兼容性
库支持

3.初始化(必须把网页所有东西[不用等pic flash vedio]执行才执行)

window.onload反之
      $(document).ready(function(){ //可以写多个
	alert("aaa")
      });
     //简化写法
$(function(){})

4.选择器和增加class属性或者直接改属性

      $("#xxx").addClass();
      $("#xxx").css({"color":"#fff","font-size":"10px"});//改css样式,
    //得到next下一个兄弟元素 隔行变色
 $("#xxx").css({"color":"#fff","font-size":"10px"}).next().css("","");
    <div id="xxx"></div>
     <p></p>

5.悬浮事件

   $("li").mouseover(function(){
         $(this).css("background":"red");
         $(this).children("div").show();
   }).mouseout(function(){
         $(this).children("div").hide();
    })

6.点击事件

$("#xxx").click(function(){})

7.隐私迭代

$("li").css({"font-weight":"bold","color":"red"}); #全部li都会被选中

8.习惯

1.关键功能写注释
2.形成开发文档

9. jq的this的作用

$(“#xx div”).click(function(){
$(this).next().css(“color”,“red”);//指#xx div的兄弟
})

10.jq得到html代码

$("#title").html();//等于js的innerHtml
 //dom转jq对象
    var aa=getByIdxxx;
    var jqaa=$(aa);      
     //jq转dom数组下标为0
         var $name=$("#aa");
         var htmlname=$name[0];   
          //或者
                                  $name.get(0);

11.轮播图

    .siblings()全部的兄弟节点
   $("li:nth-of-type(1)") //第1个li

12. jq选择器

1. 基本选择器 css有的选择器idclass $("\ast ")并集选择器$(“div,p,.title”) //全部有关键字的被选中
2. 层次 后代选择器xx xx,子选择器 xx > xx 相邻 h2+div 选中h2相邻之后的兄弟的div元素
   
   相邻 h2~div相邻之后的兄弟的所有div
3. 属性 $(" h2[href]“) 拥有这个属性(好用) $(” h2[href=‘en’]“) h2的属性 $(”[href!=‘en’]“) $(”[href^=‘en’]“)以什么以开始的
   $("[href$=‘.jpg’]”)以结尾 $(“[href*=‘en’]”)字符包含这个值
4. 过滤 有个:符号的
   1. 基本过滤 $(“li:first”) $(“li:last”) $(“li:eq(1)”)索引为第一个的元素 :gt(1) 下标大于1 :lt(1) 第0个元素变化(小于1)
   $(“:header”) 选择h1-h6的 $(“li:not(.three)”) 不包含.three选择器的所有li元素
   $(“li:even”)为偶数的 index从0开始 $(“li:odd”)
   2. 可见性 $(“div p:hidden”) p标签display为none的元素 $(“p:visible”) 为block的 和.show() 和.hide()配合使用
   !!!特殊符号转义 id=“id#a” $(“#id\#a”) id=“id[2]” $(“#id\[2\]”) ,也要注意多个空格和少个空格不一样
   3.改字体样式
   font-size
   font-weight bold
   #删除线 text-decoration line-through
   4.如何奇偶行 不同背景
   $(“table tr:odd”).css(“background”,“#f7e195”);
   $(“table tr:even”).css(“background”,“#eff7d1”);

5.jq事件(考试重点) !!!$(this).children(“p”)经常使用

$("ul>li:eq(2)>ol li").mouseover(function(){
			$(this).children("p").show()
		}).mouseout(function(){
			$(this).children("p").hide()
		})

1. 基础事件
   click()
   mouseover(function(e){ if(e.keyCode==12){//回车键}}); 触发子元素 mouseenter不会触发
   mouseout(); 会 mouseleave()不会
   mouseenter() 多使用,不会冒泡
   mouseleave()
   keyup()释放键盘(弹起)
   keydown()按下键盘(按下)
   resize();//重新设置页面大小
   $(“#nav li span”).index(this); //得到哪个索引,用 eq设置
2. 复合事件 hover和鼠标连续点击

6.绑定事件

1. 单个:$(“.on”).bind(“mouseover事件名”,function(){})
2. 多个:$(“.on”).bind({
   mouseover:function(){},
   mouseout:function(){}
   })

3.解除绑定事件(锁定使用功能)
$(“.on”).unbind();

4.鼠标放在上面 =mouseover+mouseout

  #hover是一直执行的
    $("li").hover(function(){
                  $(this).children("div").show("slow");
	  $(this).toggleClass("orange");//修改类名 切换 有和无之间切换 
   },function(){
                  $(this).children("div").hide("fast");
	  $(this).toggleClass("orange");//修改为原来orange样式
 
  }) #进入和离开
        $(this).toggle()#切换 hide()和show()

5.改变元素的透明度 淡入淡出

  $("#aa").fadeIn("slow"); //时间
 $("#aa").fadeOut(1000);//1000毫秒
 //改变元素高度
   .slideDown("slow"); //元素逐步延伸
   .slideUp("slow");      //元素逐步缩短
  //自定义动画 animate