val html text 方法
val 获取表单的val
html 设置标签及内容
text 设置文本的内容
//$("div").html("<p>我是文本</p>");
// $("div").text("<p>我是文本</p>");
width与height方法
$("div").width() 获取的是width的值
$("div").innerWidth() 获取的值 包括padding和width
$("div").outerWidth() 获取的值 包括padding width border
获取屏幕的可是区域
$(window).resize(function() {
console.log($(window).width());
console.log($(window).height());
});
####scrollTop和scrollLeft
获取页面被卷曲的高度
获取页面被卷曲的宽度
$(window).scroll(function() {
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
})
固定导航栏
需要先注册scroll事件
offset与position
offset获取相对于document的位置
position获取的是相对有定位的父元素的位置
小火箭案例
让页面的卷曲变为0
获取到body和html $(“html,body”)
做animate动画
bind和delegate 方法
bind绑定多个事件
$("p").bind({
click: function (){
},
mouseenter: function (){
}
})
delegate 事件委托
//要给div注册一个委托事件,但是最终不是由执行，而是有p执行
//第一个参数：selector:事件最终由谁来执行。
//第二个参数：事件的类型
//第三个参数：函数，要做什么
$("#box").delegate("p", "click", function (){
console.log(this);
})
jq事件历程
简单时间绑定 bind 事件绑定 delegate事件绑定 on事件绑定
bind事件如果多个动作执行一件事情 就比较省事了
这两种方式 解决不了新增元素没有事件 旧元素有点击事件 新元素没有 跟代码位置没有关系
委托事件 可以解决新增元素没有前面注册的事件
动态创建的元素也能有事件
on事件绑定
解决注册事件需要用到多种方法
统一所有事件注册方法
on 原理一样 给自己注册 就写自己
给子元素注册委托事件 就给父元素注册事件
on 有四个参数 给自己注册事件 第二个和第三个参数放空
#####给自己注册事件 2个参数
$("p").on("click", function() {
console.log("hah1");
})
注册委托事件 3个参数
父元素注册 父元素有事件 新增的元素就有事件
$("#btn").click(function() {
$("<p>牛逼了</p>").appendTo("div");
})
$("div").on("click", "p", function() {
console.log("哈哈哈");
})
事件执行顺序
先执行自己的事件 在冒泡 执行外面事件 有委托和自己相关执行委托，在执行和自己无关的
表格删除功能
创建多个元素
$("#btnAdd").on("click", function() {
$('<tr> <td>jQuery111</td> <td>传智播客-前端与移动开发学院111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb");
});
要插入的节点自己写进去 copy一直出错
$li = $('<tr> <td>jQuery111</td> <td>传智播客-前端与移动开发学院111</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>');
$("#j_tb").append($li);
移除事件绑定 off
- js中移除事件 on注册事件 移除 让事件伪空就可以了
addLisenterEvent等 用对应的解除方法
JQ移除事件绑定
bind注册的事件 用unbind
delegate注册的事件 用undelegate
上面两种方式不用了
推荐使用off
$("p").off("click");
off 参数 事件的名称
触发事件
推荐使用trigger()
trigger() 参数是事件名称
$("p").on("click", function() {
alert("呵呵");
})
$("#btn").on("click", function() {
$("p").trigger("click");
//触发p元素的事件
});
第二种
$("div").click() 直接进行调用
事件对象
使用data参数 函数中使用参数e
$("div").on("click",100, function (e) {
console.log(e);
console.log("哈哈，我有"+e.data);
});
阻止事件冒泡 阻止浏览器默认行为
//阻止 默认
//e.preventDefault();
//e.stopPropagation();
//alert(“呵呵”);
//return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为。
ie8的阻止事件冒泡e.cancelBubble
//console.log(e.cancelBubble);
//alert(“呵呵”);
delay 方法
延迟执行事件时间
链式操作
设置性操作可以链式编程
$("div").width(200).height(200).css("backgroundColor", "pink").width()
获取性操作 不能链式
在jq中有 width和height方法直接操作 宽高
####prevAll获取前面的所有兄弟元素
####nextAll 后面所有兄弟元素
链式编程注意 对象的改变
好评案例 里面有详细例子
$(this).text(has).prevAll().text(has);
在这里使用end() 方法 可以让dom对象重新变为一个
$(this).nextAll().text(nul);
此时的dom对象改变了
遍历jq对象 each方法 或者for
$("li").each(function(index, element) {
$(element).css("opacity", (index + 1) / 10);
})
$(element)指的就是$("li")里面的li对象
jq冲突问题
冲突就是引入的问题也需要用$符号造成的冲突
var $$ = $.noConflict() jq释放$的控制权
此时的$$就有$的功能了