解绑事件
<script>
// $(function(){
// //第一个按钮通过on的方式绑定点击事件
// $("#btn1").on('click',function(){
// alert('我被点击了');
// });
// //第二个按钮把第一个按钮的点击事件解绑
// $('#btn2').on('click',function(){
// //off() 参数： 要解绑的事件的名字
// $('#btn1').off('click'); //解绑事件
// })
// })
// </script>
<!-- <script>
//绑定事件
$(function(){
//通过bind绑定按钮的点击事件
$('#btn1').bind('click',function(){
alert('我可以被点击了');
});
//第二个按钮unbind解绑事件
$('#btn2').bind('click',function(){
$('#btn1').unbind('click'); //解绑事件
})
})
</script> -->
<script>
$(function(){
//点击第一个按钮，为div中的p标签绑定点击事件
$('#btn1').click(function(){
$('#dv').delegate('p','click',function(){
alert('我被点击了');
})
});
//点击第二个按钮为div中p解除绑定事件
$('#btn2').click(function(){
$('#dv').undelegate('p','click'); //解绑事件
})
})
</script>解绑细节问题
<script>
$(function(){
//为div和p都绑定点击事件
// $('div>p').click(function(){
// alert('p标签被点击了');
// });
$("#dv").delegate('p','click',function(){
alert('p标签被点击了');
});
$('#dv').click(function(){
alert('div被点击了');
});
$('#btn2').click(function(){
$('#dv').off('click'); //div下的所有的点击事件都被解绑了
//下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
// $('#dv').off('click','**');
$('#dv').off();//移除父级元素和子级元素的所有的事件
})
//如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
//但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
});
</script>trigger触发事件
<script>
$(function () {
$("#btn1").click(function () {
$(this).css("backgroundColor","red");
});
//点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
$("#btn2").click(function () {
//触发事件--3三种方式
//$("#btn1").click();
//trigget()方法中需要写上触发事件的名字
//$("#btn1").trigger("click");//触发事件
$("#btn1").triggerHandler("click");//触发事件
});
});
</script>触发默认事件
<script>
$(function () {
$("#btn").click(function () {
//触发文本框的获取焦点的事件
// $("#txt").focus();
//$("#txt").trigger("focus");
$("#txt").triggerHandler("focus");
$("#sp").text("文本框获取到焦点了");
//第一种触发事件的方式和第二种触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁)
//第三种触发事件的方式不会触发浏览器的默认事件
});
});
</script>事件对象
<script>
$(function () {
//为div中的按钮绑定事件,获取事件对象中内容
$("#dv").on("click","input",function (event) {
//获取函数在调用的时候,有几个参数
//console.log(arguments[0]);
console.log(event);
//event.delegateTarget----->div--->谁代替元素绑定的事件--div
//event.currentTarget----->input--->真正是谁绑定的事件
//event.target---->input----触发的事件
});
});
</script>键盘事件
<script>
$(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;
}
});
});
</script>事件冒泡
<script>
//事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
//元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
//取消事件冒泡
//jQuery中 return false
$(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;//取消事件冒泡
});
});
</script>链式编程
function Student(name) {
// console.log(name);
this.name=name;
this.sayHi=function (name) {
// console.log(name);
if(name){
console.log("俺是"+name);
return this;
}else{
console.log("我的名字叫"+this.name);
}
// console.log("我的名字叫"+this.name);
// return this;//把当前对象返回
};
this.eat=function () {
console.log("我就是喜欢吃大蒜+榴莲+臭豆腐");
};
}
var stu=new Student('大白');
stu.sayHi('楚楚笔笔').eat();评分星级
<script>
// $(function () {
// //获取所有的li绑定鼠标进入和鼠标离开和点击事件
// $(".comment>li").mouseover(function () {
// $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
// }).mouseout(function () {
// $(this).text("☆").prevAll("li").text("☆");
// //获取属性index为10的这个li和这个li前面所有的li
// $(".comment>li[index=10]").text("★").prevAll("li").text("★");
//
// }).click(function () {
// $(this).attr("index","10").siblings("li").removeAttr("index");
// });
// });
</script>
<script>
$(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("★")
}).click(function () {
$(this).attr("index","1").siblings("li").removeAttr("index");
});
});
</script>each 索引 遍历
<script>
$(function () {
//页面加载后,让每个li的透明度发生改变
//不同的元素不同的设置方式--each方法
$("#uu>li").each(function (index,element) {
//第一个参数是索引,第二个参数是对象
//console.log(arguments[0]+"====="+arguments[1]);
$(element).css("opacity",(index+1)/10);
});
});
</script>多库共存
<script>
//让jquery对$对象进行释放控制权
// var xy=$.noConflict();
// //从此以后xy就是曾经的$---一毛一样的
// var $=100;//$原本是对象--->变量
// xy(function () {
// xy("#btn").click(function () {
// alert("哈哈,我又变帅了");
// });
// });
var $=100;//$原本是对象--->变量
jQuery(function () {
jQuery("#btn").click(function () {
alert("哈哈,我又变帅了");
});
});
</script>jquery自定义插件
<script>
$.fn.changeBackgrounColor=function(color) { //先声明后使用 2
$(".cls").css("backgroundColor",color);
}
$(function(){
//点击每个按钮改变每个div的背景颜色
$('input[type=button]').click(function(){
$('.cls').changeBackgrounColor($(this).val()); //2
// $('.cls').css('backgroundColor',$(this).val());//.css设置样式
//changeBackgrounColor($(this).val()); //第一中
})
})
function changeBackgrounColor(color) { //先声明后使用 第一中
$(".cls").css("backgroundColor",color);
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
