JS轻量级框架：jQuery

jQuery

Query是一个JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的

JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery对象

jQuery开发中所遇到的对象

• 通过$所获得的是jQuery对象

选择器: $("p")强转: $(p)创建对象: $("")

• 修改数据的方法返回jQuery对象

obj.html("abc")obj.attr("src","")

• 若查询到的是元素则返回jQuery对象

obj.parent()obj.next()

• 若读取到的是文本则返回DOM对象

obj.html()obj.val()

• 万能的判断方式
  控制台输出此对象,若是数组则是jQuery对象

jQuery选择器(查询节点)

jQuery选择器类似于CSS选择，能够实现定位元素，施加行为使用选择器能够将内容与行为分离

基本选择器

• 元素选择器：依据标签名定位元素
  $(“标签名”)
• 类选择器：根据class属性定位元素
  $(“.class属性名”)
• id选择器：根据id属性定位元素
  $(“#id”)
• 选择器组：通过一组属性定位元素
  $(“#id, .class属性名”)
• 层次选择器
  
  • $(“select1 select2”)
    在select1元素下，选中所有满足select2的子孙元素
  • $(“select1 > select2”)
    在select1元素下，选中所有满足select2的子元素
  • $(“select1 + select2”)
    选中 select1元素的，满足select2的下一个弟弟
  • $(“select1 ~ select2”)
    选中 select1元素的，满足select2的所有弟弟

过滤选择器

• 基本过滤选择器
  
  • 根据元素的基本特征定位元素，常用于表格和列表
    : first，:last：$(“tr:first”)
    :not(selector)：把满足selector的元素排除在外
    :even：挑选偶数行
    :odd：挑选奇数行
    :eq(index)：下标等于index的元素
    :gt(index)：下标大于index的元素
    :lt(index)：下标小于index 的元素
• 内容过滤选择器
  
  • 根据文本内容定位元素
    :contains(text)：选中包含给定文本的元素
    :empty：选中所有不包含子元素或文本的空元素
    $(“p:contains(‘月饼’)”)
  • 可见性过滤选择器
    根据可见性定位元素
    :hidden：选中所有不可见元素，或type为hidden的元素
    :visible：选中所有可见元素
    $(“input:hidden”)
• 属性过滤选择器
  根据属性定位元素
  [attribute]：选中具有attribute属性的元素
  [attribute=value]：选中属性等于value的元素
  [attribute!=value]：选中属性不等于value的元素
  $(“input[value=’点击’]”)

• 状态过滤选择器
  根据状态定位元素
  :enabled：选中可用的元素
  :disabled：选中不可用的元素
  :checked：选中被选中的checkbox
  :selected：选中被选中的option
  $(“input:selected”)

  表单选择器

  :text，:password，:radio，:checkbox
  :submit，:reset，:button
  :file，:hidden
  示例：$(“:text”)

读写节点

$(function(){        //html() == innerHTML        console.log($("p:eq(0)").html());        $("p:eq(0)").html("jQuery支持<u>读写</u>节点");        //text() == innerText        console.log($("p:eq(1)").text());        $("p:eq(1)").text("jQuery支持<u>增删</u>节点");        //val() == value        console.log($(":text:first").val());        $(":text:first").val("How are you");        //attr() == getAttribute(),setAttribute()        console.log($("img:first").attr("src"));        $("img:first").attr("src","../images/02.jpg");    });

增删节点

//创建节点var li = $("<li>天津</li>");//插入DOMparent.append(li);$("ul").prepend(li);$("#gz").after(li);brother.before(obj);//删除DOM $("#gz").remove();obj.remove(selector);obj.empty();

节点遍历

obj.children();//所有孩子obj.next();//下一个兄弟obj.prv();//上一个兄弟obj.siblings();//所有兄弟obj.findSelector();obj.parent();

jQuery样式操作

$(function(){        $("p").addClass("big").addClass("important");        $("p").removeClass("big").removeClass("important");        console.log($("p").hasClass("big"));        setInterval(function(){            $("p").toggleClass("big");        },200);    });    hasClass();    css("");//读取css值    /css("","")//设置多个样式

jQuery事件

• 动态绑定
  $(fn)和window.onload
  onload写多次则后者会覆盖前者,而(fn)写多次都有效.onload在整个网页加载完触发,而(fn)是在标签加载完就触发.
  bind
  obj.bind(“click”,function(){})
  obj.click(function(){})
• 获取事件源
  e.target()
• 取消冒泡
  e.stopPropagation()
• 合成事件

$(function(){        //给图片绑定悬停事件        $("img").hover(            function(){                $(this).addClass("big");                //toggleClass("big")                //width(250)                //css("width","250px")                //attr("class","big")            },//悬停时            function(){                $(this).removeClass("big");            } //离开时        );        //启动定时器        setInterval(function(){            //让图片在显示与隐藏间切换            $("img").toggle();        },500);    });

• 模拟操作

    $(function(){        //给按钮x绑定单击事件        $("#gg>input").click(function(){            $("#gg").slideUp(500);        });        //推迟3秒        setTimeout(function(){            //对按钮x模拟单击事件,即            //让电脑自动点击一下按钮x            $("#gg>input").trigger("click");        },3000);    });

jQuery动画

• show() hide()
• slideDown() slideUp()
• fadeIn() fadeOut()
  上述函数都有两个参数(执行时间,回调函数)
• 自定义动画
  
  • animate(偏移位置,执行时间,回调函数)

<style>    #d1 {        width: 200px;        height: 200px;        background-color: red;        /*自定义动画基于定位(相对/绝对/固定)*/        position: relative;    }    #d2 {        width: 200px;        height: 400px;        background-color: blue;        position: fixed;        top: 100px;        right: -150px;    }</style><script src="../js/jquery-1.11.1.js"></script><script>    function f1() {        $("#d1").show(3000);    }    function f2() {        //参数2是一个函数,jQuery会在动画完成后自动调用它.        //像这样的,需要传递给方法并且由方法自动调用的函数,        //通常称之为回调函数.        $("#d1").hide(3000,function(){            console.log("OVER");        });        //动画的实现原理:        //通过定时器不断修改元素的样式(大小及透明度).        //当前方法f2相当于主线程,调用的hide方法,        //相当于启动了定时器,即相当于启动了支线程.        //主线程和支线程并发执行,所以主线程立刻输出"完成",        //而动画却在3秒后才完成.        console.log("完成");    }    $(function(){        //给d1绑定悬停事件        $("#d1").hover(            function(){                $(this).animate({"left":"20px"},500);//自定义动画            },            function(){                $(this).animate({"left":"0"},500);            }        );        //给d2绑定悬停事件        $("#d2").hover(            function(){                $(this).animate({"right":0},500);            },            function(){                $(this).animate({"right":"-150px"},500);            }        );    });</script>

• 显示、隐藏的动画效果
  通过同时改变元素的宽度和高度来实现显示或隐藏元素
  
  • 语法
    (selector).hide(speed,callack)(selector).show(speed, callback)
  • 参数
    speed：可选。规定隐藏/显示的速度，取值为：”slow”, “fast”或毫秒
    callback：可选。是隐藏/显示完成后所执行的函数名称
    对象隐藏后会释放所占有的空间
• 上下滑动式动画效果
  通过改变高度来实现显示或隐藏元素。图像元素与其他元素效果稍有不同
  
  • $(selector).slideUp(speed, callback)
    对象向上滑动，对象折叠，隐藏对象
  • $(selector).slideDown(speed, callback)
    对象向下滑动，对象展开，显示对象
  • $(selector).slideToggle(speed, callback)
    交替执行以上两个方法
    参数同以上所释相同
• 淡入淡出式动画效果
  通过改变不透明度opacity来实现显示或隐藏元素
  
  • $(selector).fadeIn(speed, callback)
    显示元素
  • $(selector).fadeOut(speed, callback)
    隐藏元素
  • $(selector).fadeToggle(speed, callback)
    交替执行以上两个方法
  • $(selector).fadeTo(speed, opacity, callback)
    参数callback同以上相同
    speed此处是必需的
    opacity必需。将淡入淡出效果设置为给定的不透明度（值介于0与1之间）
• 自定义动画效果(animate)
  语法
  
  • $(selector).animate({params}, speed, callback);
    参数
    params定义形成动画的CSS属性采用直接量创建对象体现speed, callback同上
  • 操作单个属性
    示例：$(“#div1”).animate({left:’250px’});
    由于元素默认是静态的，如想要移动元素，需将其position属性设置为relative，fixed或absolute
    不管写几个animate，都是相对于原始位置的偏移

小知识点

<!--     readonly:只读,框内的值依然能提交给服务器.    disabled:禁用,框内的值无法提交给服务器. --><p>    账号:<input type="text" disabled/></p>