jquery day4

1、为元素绑定事件（建议用on）

对象.事件名字(事件处理函数);---普通写法

对象.bind(参数1，参数2);---参数1：事件名字，参数2：事件处理函数

前两种方式只能为存在元素绑定事件，后添加元素没有事件

下面两种方法可以为存在元素绑定事件，后添加元素也有事件

对象.delegate("选择器","事件名字"事件处理函数,);---父级元素调用方法，代理子级元素绑定事件

对象.on("选择器","事件名字"事件处理函数,);---父级元素调用方法，代理子级元素绑定事件

2、案例添加课程

$(function(){

//显示对话框

$("#j_btnAddData").click(function(){

$("#j_formAdd").show();//显示对话框

$("#j_mask").show();//显示遮挡层

});

function closeKuang(){

$("#j_formAdd").hide();//隐藏对话框

$("#j_mask").hide();//隐藏遮挡层

}

//点击X关闭对话框

$("#j_hideFormAdd").click(function(){

closeKuang();

});

//添加数据案例

$("#j_btnAdd").click(function(){

//先获取课程文本框对象

var j_txtLesson=$("# j_txtLesson");

//获取学院文本框对象

var j_txtBelSch=$("# j_txtBelSch");

//创建行列并直接加入tbody中

$("<tr><td>"+j_txtLesson.val()+"<td><td>"+j_txtBelSch.val()+"</td><td>固定直接复制过来</td></tr>").appendTo($("j_tb"));

closeKuang();

//清空课程文本框

j_txtLesson.val(" ");

});

//为a注册点击事件，使用on

$("j_tb").on("click","get",function(){

$(this).parent().parent().remove();

});

});

3、bind解绑

对象.unbind("解绑事件名字"); 括号中没有参数，该元素所有事件都解绑

4、delegate解绑

对象.undelegate("对象","事件1 事件2");括号中没有参数，该元素所有事件都解绑

5、on解绑

对象.off("事件1 事件2");括号中没有参数，该父级元素和子级元素所有事件都解绑

对象.off("事件1 事件2"，"子级元素");该子级元素两个事件都解绑，事件为空，所有事件解绑

对象.off("事件1","**");该父级元素中子级元素所有事件1都解绑

8、事件冒泡阻止事件冒泡(操作子级元素触发父级元素事件)

$(function(){

$("#dv1").click(function(){

console.log($(this).attr("id"));

});

$("#dv2").click(function(){

console.log($(this).attr("id"));

});

$("#dv3").click(function(){

console.log($(this).attr("id"));

return false;

});

});

9、触发

对象.事件名字();

对象.trigger(事件名字);

对象.triggerHandle("事件名字");  //可以触发事件，不能触发浏览器行为

10、获取用户按下什么组合键

$(function(){

$(document).mousedown(function(e){

if(e.altKey){

console.log("按下alt键同时鼠标也按下了");

}elae if(e.shiftKey){

console.log("按下shift键同时鼠标也按下了");

}else if(e.ctrlKey){

console.log("按下ctrl键同时鼠标也按下了");

}else{

console.log("用户按下了鼠标");

}

});

});

11、按键改变颜色

$(function(){

$(document).keydown(function(e){

switch(e.keyCode){

case 65:$("#dv").css("backgroundColor","green");break;

case 66:$("#dv").css("backgroundColor","pink");break;

}

});

});

12、链式编程原理

.方法();---获取这个值

.方法(值);---返回当前的对象

13、案例五星评分

$(function(){

$(".comment>li").mouseenter(function(){

//当前li实行五角心，前面li也是实心，后面为空心

$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");

}).click(function(){

//点哪个li就为这个li添加一个自定义属性作为标识，但是其他li中自定义属性要删除

$(this).attr("index","1").siblings("li").removeAttr("index");

}).mouseleave(function(){

//鼠标离开获取带有index属性li，改变这个li五角星，前面实心，后面空心

$(".comment>li").text("☆");

$(".comment>li[index=1]").text("★").prevAll("li").text("★");

});

});

<ul class="comment">

<li>☆</li>

<li>☆</li>

<li>☆</li>

<li>☆</li>

<li>☆</li>

</ul>

14、each方法（遍历jquery对象）改变透明度

里面对象最开始是DOM对象，先转换为jquery对象

$(function(){

$("#uu>li").each(function(index,ele){

var opacity=(index+1)/10;

$(ele).css("opacity",opacity);

});

});

15、多库共存（避免命名冲突）

var xy=$.noConflict(); 把$让权给xy，$可以作为其他用法出现在代码中

16、包装集

如何判断页面中元素存在：通过.length属性不等于判断

只创建一个p标签

$("#btn").click(function9){

if($("#p1").length==0){

$("<p id='p1'>p标签</p>").appendTo("#dv");

}

});

17、几个属性

innerWidth()/innerHeight()内边距

outerWidth()/outHeight()包括内外边距和边框

18、插件

先下载（压缩包js文件，css文件，插件的js文件，index.html文件）

自己创建一个文件夹---插件

（1）引入js，css，插件的js文件

（2）把index.html中复制的hrml代码加入到自己body中

（3）把index.html文件中jquery代码复制到script标签中

19、做插件

<script src="jquery-1.12.1.js"></script>

<script>

//如果希望jquery对象能够调用这个方法，那么就把这个方法加入到$.fn.方法这个位置

$(function(){

//点击按钮改变每个div背景颜色

$.fn.changeColor=function(color){

$(this).css("backgroundColor",color);

};

$("#dv input").click(function(){

$("#dv2 div").changeColor($(this).val());

});

});

</script>

<div id="dv1">

<input type="button" value="red" />

<input type="button" value="green" />

<input type="button" value="blue" />

<div id="dv2">

<div></div>

<div></div>

<div></div>

</div>

</div>

步骤：

html文件

写样式代码，引入jquery文件，写功能代码，body中写结构代码，功能实现了

在js文件夹中，写入两个js文件（jquery的js文件，插件js文件）

实现基本功能代码放在js文件中

在css文件夹中写入css文件

把基本实现的代码加入到$.fn中

插件使用：

引入js，css，插件的js文件

复制html代码到body中

复制实现功能代码到页面加载事件中即可

20、切换商品

$.fn.changeTab=function(index){

$(this).find(ul:eq("+index+")").show().siblings("ul").hide();

};

$(function(){

//鼠标点击hd这个div中每个li改变背景颜色

$("#dv .hd li").click(function(){

$(this).addClass("on").siblings("li").removeClass("on");

//先获取当前li索引

var index=$(this).index();

$("#dv .bd").changeTab(index);

});

});

21、事件参数对象下属性

e.target得到的是触发该事件目标对象（DOM）

e.currentTarget得到的是触发该事件当前对象

e.delegateTarget得到的是代理的这个对象

22、jquery ui使用步骤（jquery官网plugs中）

（1）引入jquery ui的css文件

（2）引入jquery的js文件

（3）引入jquery ui的js文件

（4）查找和复制UI某个功能的所有代码（html，css，js）

f12找到代码名称，右键查看源代码ctrl+f输入代码名称，将html代码放在body中，css代码放在style中，js代码放在script页面加载中

（5）测试和适合