1.项目中常用增加删除列表数据,新增弹框
如图所示
添加数据
删除数据
(div)先建一个整体大框
<div class="wrap">
/*先写一个添加列表元素的按钮*/
<div>
<input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
</div>
/*再写列表*/
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>已学会</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>html</td>
<td>软件学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>软件学院</td>
<td><a href="javascrip:;" class="get">GET</a></td>
</tr>
</tbody>
</table>
</div>
新增弹框出现后的背景色
<div id="j_mask" class="mask"></div>
新增按钮的弹框
value=""中写入值就可以设置input框中默认显示
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span>添加数据</span>
<div id="j_hideFormAdd">x</div>/*关闭按钮*/
</div>
<div class="form-item">
<label class="lb" for="j_txtLesson">课程名称:</label>
<input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
</div>
<div class="form-item">
<label class="lb" for="j_txtBelSch">所属学院:</label>
<input class="txt" type="text" id="j_txtBelSch" value="软件学院">
</div>
<div class="form-submit">
<input type="button" value="添加" id="j_btnAdd">
</div>
</div>
(css)省略了一些字体样式
* {padding:0;margin:0;}
.wrap {width:410px;margin:100px auto 0;}
table {border-collapse:collapse;border-spacing:0;border:1px solid #c0c0c0;}
th,td {border:1px solid #d0d0d0;color:#404060;padding:10px;}
td a.get {text-decoration:none;}
a.del:hover {text-decoration:underline;}
tbody tr:hover {cursor:pointer;background-color:#fafafa;}
.form-item {height:100%;position:relative;padding-left:100px;padding-right:20px;margin-bottom:34px;line-height:36px;}
.form-item > .lb {position:absolute;left:0;top:0;display:block;width:100px;text-align:right;}
.form-item > .txt {width:300px;height:32px;}
.mask {position:absolute;top:0px;left:0px;width:100%;height:100%;background: #ff312e;opacity:0.15;display:none;}
.form-add {position:fixed;top:30%;left:50%;margin-left:-197px;padding-bottom:20px;background:#fff;display:none;}
.form-add-title {background-color:#f7f7f7;border-width:1px 1px 0 1px;border-bottom:0;margin-bottom:15px;position:relative;}
.form-add-title span {width:auto;height:18px;font-size:16px;font-family:微软雅黑;font-weight:bold;color:rgb(102,102,102);text-indent:12px;padding:8px 0px 10px;margin-right:10px;display:block;overflow:hidden;text-align:left;}
.form-add-title div {width:16px;height:20px;position:absolute;right:10px;top:6px;font-size:30px;line-height:16px;cursor:pointer;}
.form-submit input {width:170px;height:32px;}
(jq)大框$(function(){})省略
添加数据按钮点击后,显示遮罩层和弹框display:block
$("#j_btnAddData").click(function () {
$("#j_mask").css("display","block");
$("#j_formAdd").css("display","block");
});
点击关闭按钮,隐藏遮罩层和弹框display:none
$("#j_hideFormAdd").click(function () {
$("#j_mask").css("display","none");
$("#j_formAdd").css("display","none");
});
弹框中的确认添加按钮,获取.val(),置空.val("")
$("#j_btnAdd").click(function () {
//获取课程 j_txtLesson
var lesson=$("#j_txtLesson").val();
//获取学院 j_txtBelSch
var belSch=$("#j_txtBelSch").val();
//创建行--拼接字符串,添加到tbody中
$("<tr><td>"+lesson+"</td><td>"+belSch+"</td><td><a href='javascrip:;' class='get'>GET</a></td></tr>").appendTo($("#j_tb"));
//隐藏遮挡层和对话框
$("#j_mask").css("display","none");
$("#j_formAdd").css("display","none");
$("#j_txtLesson").val("");//情况课程的文本框(此处可能会有一个课程名称添加bug),val("")是清空
});
点击GET删除表格中的信息
//如果元素是动态添加的,那么非常推荐用on的方式为动态添加的元素绑定事件
$("#j_tb").on("click",".get",function () {
$(this).parent().parent().remove();//删除tr,a的父元素的父元素。“.get”在a中其父元素是td,再父元素是tr,把tr移除
//$(this).parent("td").parent("tr").remove();也对
});
2.解绑事件
点绑定按钮,之后再点p标签中内容,有弹框“我被点了”,点击解绑后,点p标签,不再弹出
delegate->undelegate
$(function () {
//点击第一个按钮为div中p绑定点击事件
$("#btn1").click(function () {
$("#dv").delegate("p","click",function () {
alert("我被点了");
});
});
//点击第二个按钮为div中p解除绑定事件
$("#btn2").click(function () {
$("#dv").undelegate("p","click");//解绑
});
});
bind->unbind注意解绑的时候,这里click是一个参数
$(function () {
$("#btn1").bind("click",function () {
alert("我又被点了");
});
$("#btn2").bind("click",function () {
$("#btn1").unbind("click");//解绑事件的方法
});
});
on->off
$(function () {
$("#btn1").on("click",function () {
alert("我被点了");
});
$("#btn2").on("click",function () {
//off()参数:要解绑的事件的名字
$("#btn1").off("click");//解绑事件,多个事件解绑加空格
});
});
- $("#dv").off(“click”,"**");把子级元素的点击事件解绑了,父级元素的点击事件还存在
- $("#dv").off();移除父级元素和子级元素的所有的事件
- 如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑。但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
(div)
<input type="button" value="绑定事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
<p>这是div中的一个p标签</p>
</div>
(jq)
$(function () {
$("#dv").delegate("p","click",function () {
alert("p被点了");
});
$("#dv").click(function () {
alert("div被点了");
});
$("#btn2").click(function () {
//$("#dv").off("click");
$("#dv").off("click","**");
// $("#dv").off();
});
});
3.事件触发
触发事件–3三种方式
- $("#btn1").click();
- trigget()方法中需要写上触发事件的名字 $("#btn1").trigger(“click”);
- $("#btn1").triggerHandler(“click”);
案例1:点击第二个按钮调用第一个按钮的点击事件—触发第一个按钮的点击事件
(div)
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="第二个按钮" id="btn2"/>
(jq)
$(function () {
$("#btn1").click(function () {
$(this).css("backgroundColor","red");
});
$("#btn2").click(function () {
$("#btn1").triggerHandler("click");//触发事件
});
});
案例2: .click()和trigget触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁),triggerHandler触发事件的方式不会触发浏览器的默认事件
focus获取焦点的事件
(div)
<input type="button" value="触发事件" id="btn"/>
<input type="text" value="" id="txt"/>
<span id="sp"></span>
(jq)
$(function () {
$("#btn").click(function () {
//触发文本框的获取焦点的事件
$("#txt").focus();
$("#sp").text("文本框获取到焦点了");
});
});
4.事件对象
为div中的按钮绑定事件,获取事件对象中内容
- event.delegateTarget----->div—>谁代替元素绑定的事件–div
event.currentTarget----->input—>真正是谁绑定的事件
event.target---->input----触发的事件
(div)
<div id="dv">
<input type="button" value="按钮" id="btn"/>
</div>
(jq)
$(function () {
//
$("#dv").on("click","input",function (event) {
//获取函数在调用的时候,有几个参数
//console.log(arguments[0]);查看内容
console.log(event);
});
});
5.案例:点击abcde切换div颜色
当按钮被按下时,发生 keydown 事件。
$(function () {
$(document).keydown(function (e) {
var keyCode=e.keyCode;//键盘按下后的键对应的键值
switch (keyCode){
case 65:$("#dv").css("backgroundColor","red");break;
case 66:$("#dv").css("backgroundColor","green");break;
case 67:$("#dv").css("backgroundColor","blue");break;
case 68:$("#dv").css("backgroundColor","yellow");break;
case 69:$("#dv").css("backgroundColor","black");break;
}
});
});
非jq的键盘点击案例:在输入框中输入键盘上的字符获取按下字母的 Unicode 字符代码
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
/* 在实例中,我们使用了支持多浏览器的方法,因为 keyCode 属性无法再 Firefox 浏览器中工作。但是 which 属性可以。
如果浏览器支持 event.which 则使用 event.which,否则使用 event.keyCode */
function myFunction(event) {
var x = event.which || event.keyCode;
document.getElementById("demo").innerHTML = " Unicode 值为: " + x;
}
</script>
6. 取消事件冒泡+取消默认事件
-
事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
-
元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
-
取消事件冒泡
jQuery中 return false
event.preventDefault也可以取消默认事件
(div)
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
(jq)
- 正常效果:
点3,出现div3被点,因为3取消了事件冒泡
点2,出现div2,1被点
点1,出现div1被点 - 如果3不取消事件冒泡,2里也有背景变黑样式:
点3,出现div3,2,1被点了,之后背景变黑
点2,出现div2,1被点了,之后背景变黑
点1,出现div1被点了
$(function () {
$("#dv1").click(function () {
alert("dv1被点了"+$(this).attr("id"));
});
$("#dv2").click(function () {
alert("dv2被点了"+$(this).attr("id"));
//$("body").css("backgroundColor","black");
});
$("#dv3").click(function () {
alert("dv3被点了"+$(this).attr("id"));
return false;
});
});
取消浏览器的默认事件(超链接跳转)
添加return false;后不跳转
<a href="http://www.baidu.com" id="ak">百度</a>
$(function () {
$("#ak").click(function () {
alert("超链接被点了");
return false;
});
});
7.链式编程原理
内部返回了return this当前对象有些方法设置了值才能返回当前对象,如果没有设置值,是获取属性对应的值,而不是当前对象
function Student(name) {
this.name=name;
this.sayHi=function () {
console.log("我的名字叫"+this.name);
return this;//把当前对象返回
};
this.eat=function () {
console.log("吃点什么");
};
}
var stu=new Student("小明");
// stu.sayHi().eat();//sayHi(),如不用return this;把当前对象返回,会出现bug产生断链,不传值不能进行链式编程
stu.sayHi().eat();
function Student(name) {
this.name=name;//注意这个不能写在里面否则undefined
this.sayHi=function (name) {//这里也有参数
if(name){
return this;
}else{
console.log("我的名字叫"+this.name);
}
};
}
var stu=new Student("小明");
stu.sayHi()
function Student(name) {
this.name=name;
this.sayHi=function (name) {//这里没有name的话输出就是小明了
if(name){
console.log("这是"+name);
return this;
}else{
console.log("我的名字叫"+this.name);
}
};
this.eat=function () {
console.log("吃点什么");
};
}
var stu=new Student("小明");
stu.sayHi("小黑").eat();
8.each方法
jQuery中的隐式迭代,不需要我们再次进行遍历对某些元素进行操作但是,如果涉及到对不同的元素有不同的操作,那么需要进行each遍历
案例:
页面加载后,让每个li的透明度发生改变;不同的元素不同的设置方式–each方法
(css)
ul li{
width: 100px;
height: 100px;
background-color: green;
list-style-type: none;
float: left;
margin-left: 10px;
}
(div)
<ul id="uu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
...
</ul>
(jq)
$(function () {
$("#uu>li").each(function (index,element) {
//第一个参数是索引,第二个参数是对象
//console.log(arguments[0]+"====="+arguments[1]);
$(element).css("opacity",(index+1)/10);
});
});
9评价案例
)
(css)
* {padding: 0;margin: 0;}
.comment {font-size: 40px;color: yellow;}
.comment li {float: left;}
ul {list-style: none;}
(div)
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
(jq)
$(function () {
$(".comment>li").mouseover(function () {
$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
}).mouseout(function () {
$(".comment").find("li").text("☆");
$(".comment>li[index=1]").text("★").prevAll("li").text("★")
//找到鼠标在的哪个li上它是实心星(这个li的index=1),让它前面的也是实心(没有这一步不能实现点击确定实心星数)
}).click(function () {
$(this).attr("index","1").siblings("li").removeAttr("index");
//点击为这个li添加一个自定义属性,作为一个标识,兄弟元素移除这个属性
});
});
10.多库共存
同一个页面不仅引入了jQuery的外部文件,也引入了其他的库文件。如果此时其他的库文件里也有$符号,那么就使用
$.noConflict()解决
其他语言中:这种方式叫做解决命名空间的冲突
var xy=$.noConflict();
var $=100;//$原本是对象--->变量
jQuery(function () {
jQuery("#btn").click(function () {
alert("111111");
});
});
// 让jquery对$对象进行释放控制权
var xy=$.noConflict();
//从此以后xy就是曾经的$---一毛一样的
var $=100;//$原本是对象--->变量
xy(function () {
xy("#btn").click(function () {
alert("11111111");
});
});