JQuery笔记

JQuery笔记

write less，do more

引用百度CDN

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

JQuery语法

1.文档就绪函数

$(function()
{

});

2.JQuery选择器

基础选择器

$("#testId")     //id选择器

$(".className")   //类选择器

$("p")   //元素选择器

$("*")  //全选择器（匹配所有元素）

$("div,span,p")  //组合选择器

层级选择器

$("div p")  //后代选择器

$("div>p")  //子代选择器

$("div + p")  //相邻选择器（一个）（同级）

$("div~p")   //兄弟选择器（多个）（同级）

过滤选择器

基本过滤选择器

$("li:first")    //第一个li

$("li:last")     //最后一个li

$("li:even")     //匹配索引值为偶数的元素（索引值从0开始计数）

$("li:odd")      //匹配索引值为奇数的元素（索引值从0开始计数）

$("li:eq(4)")    //匹配索引值为4的元素（索引值从0开始计数）也就是第五个元素

$("li:gt(2)")    //匹配索引值大于 2 的li

$("li:lt(2)")    //匹配索引值小于 2 的li

$("li:not(#test)") //匹配除 id="test" 以外的所有li

$("div:animated") //匹配正在执行动画的div元素

$("div:focus") //匹配当前获得焦点的div元素

内容过滤选择器

$("div:contains(test)")        // 匹配包含 test文本的div元素
$("div:has(p)")                //匹配含有指定选择器（如p）的div元素
$("td:empty")                 //匹配不包含子元素或者文本的空元素（td）
$("div:parent")                //匹配含有子元素或者文本的div元素

可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

属性过滤选择器

$("input[name]")          //匹配所有含有name属性的input元素

$("div[id]")              //匹配所有含有 id 属性的 div 元素

$("div[id='123']")        // 匹配id属性值为123的div 元素

$("div[id!='123']")        // id属性值不等于123的div 元素

$("div[id^='qq']")        // id属性值以qq开头的div 元素

$("div[id$='zz']")        // id属性值以zz结尾的div 元素

$("div[id*='bb']")        // id属性值包含bb的div 元素

$("input[id][name$='man']")  //选择含有id属性且name属性以man结尾的input元素

表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素

$(":text")      

 //匹配所有的单行文本框，推荐使用$("input:text")效率更高，下同
 
$("input:password")   //所有密码框

$("input:radio")      //所有单选按钮

$("input:checkbox")   //所有复选框

$("input:submit")     //所有提交按钮

$("input:reset")      //所有重置按钮

$(":button")     //所有button按钮（<input type=”button”>&&<button></button>）

$("input:file")       //所有文件域

$("input:hidden")   //匹配所有type=“hidden”的元素

状态过滤选择器（针对表单）

$("input:enabled")    // 匹配可用的 input

$("input:disabled")   // 匹配不可用的 input

$("input:checked")    // 匹配选中的 input

$("option:selected")  // 匹配选中的 option

3.JQuery动画

显示隐藏

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);


Speed:”slow”,”normal”,”fast”,2000(毫秒)

Callback：function（）{}

淡入淡出

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeTogglae(speed,callback);

$(selector).fadeTo(speed,opacity[0-1],callback);

opacity:0-1,设置不透明度

滑动

$(selector).slideup(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);

自定义CSS动画和停止动画

$("#start").click(function(){
                $("#content")
                .animate({fontSize:'80px'})
                .animate({ opacity:'0.5'})
                .animate({opacity:'0.1'})
                .animate({opacity:'0.7'})
                .animate({opacity:'0.3'})
                .animate({opacity:'0.9'})
                .animate({fontSize:'10px'})
            });

            $("#stop").click(function(){
                $("#content").stop(true);
            });

4.JQuery操作DOM

DOM：Document Object Model 文档对象模型

获取，设置内容

有参设置，无参返回

$(selector).text()    - 返回所选元素的文本内容
$(selector).html()    - 返回所选元素的内容（包括 HTML 标记）
$(selector).val()    - 返回表单字段的值

$("#test1").text("Hello world!");          设置所选元素的文本内容
$("#test2").html("<b>Hello world!</b>");   设置所选元素的内容（包括 HTML 标记）
$("#test3").val("hello，world");                 设置表单字段的值

获取，设置属性

<a href="www.baidu.com" id="baidu">baidu</a>


$("#baidu").attr("href");

 $("#baidu").attr({
        "href" : "zkrun.top:8090",
        "title" : "JQuery"
    });

添加，删除元素

插入子元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容

插入同级元素
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

remove()  :删除被选元素及所有子元素

empty() :删除被选元素下的所有子元素

操作CSS类

$(seletctor).addClass(class1 class2...);

$(selector).removeClass(class1 class2...);

切换class属性：toggleClass（）——添加和删除之间的切换
$(selector).toggleClass(class1 class2);

css()

//返回属性值
$("p").css("background-color");

//设置css属性值
单个CSS属性：$("p").css("background-color","yellow");
//逗号分隔
多个CSS属性：$("p").css({"background-color":"yellow","font-size":"200%"});

5.JQuery遍历

向上遍历

//返回被选元素的父元素
$(selector).parent();

//返回被选元素的所有祖先元素，直到<html>根节点
$(selector).parents();

//返回两者元素之间的所有元素
$(selector).parentsUntil(element);

向下遍历

//返回被选元素的直接子元素
$(selector).children(); 

//返回被选元素的被选中的后代元素
$(selector).find(element);

返回所有的后代元素
$(selector).find(“*”);

同级遍历

//返回所有同级元素
$(selector).siblings();

//返回被选元素的下一个元素
$(selector).next();

//返回被选元素 后 的所有同级元素
$(selector).nextAll();

//返回被选元素和之后设置元素之间的所有同级元素
$(selector).nextUntil(element);

//返回被选元素前一个元素
$(selector).prev();

//返回被选元素 前 的所有同级元素
$(selector).prevAll();

返回被选元素和之前设置元素之间的所有同级元素
$(selector).prevUntil(element);

过滤方法

//在一组相同被选中的元素中选择第一个元素
$(selector).first();

//在一组相同被选中的元素中选择最后一个元素
$(selector).last();

//选择索引值为index的元素（从0开始）
$(selector).eq(index);

//选择带有selected类的元素
$(selector).filter(.selected);

//选择不带selected类的元素
$(selector).not(.selected);

//选择一个范围的元素(包括start，不包括end)
$(selector).slice(start,end);
选择第一个元素：$(selector).slice(0,1)
选择最后一个元素：$(selector).slice(-1);

//判断被选元素是否含有selected类属性，返回布尔值
$(selector).hasClass(.selected);

6.JQuery 事件

常用事件

//元素失去焦点触发事件
$(selector).blur(function);

//元素获得焦点时触发事件
$(selector).focus(function);

//元素内容改变时触发事件,仅适用表单字段
$(selector).change(function);

//点击元素时触发事件
$(selector).click(function);

//双击元素时触发事件
$(selector).dbclick(function);


//键盘事件

$(selector).keydown(function);     //keydown 键被按下的过程
$(selector).keypress(function);    //keypress 键被按下
$(selector).keyup(function);       //keyup 键松开

//鼠标事件

//获得鼠标在页面的位置
$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});


//按下鼠标左键与释放鼠标左键

 $("div").mouseup(function(){
    $(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
  });
  $("div").mousedown(function(){
    $(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
  });


//鼠标进入元素和离开元素

鼠标离开元素
$(selector).mouseleave(function);
鼠标进入元素
$(selector).mouseenter(function);

//hover方法
$(selector).hover(inFunction,outFunction);

事件处理

// on()方法,在选择元素上绑定一个或多个事件处理函数

单个事件处理：
  $("#div1").on("click",function(){
    $(this).css("background-color","pink");
  });
  
多个事件处理
 $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });

//off()方法,移除on方法添加的事件
$("p").off("click");
});