jq-其他用法
// 获取
console.log(
(
"
d
i
v
"
)
.
t
e
x
t
(
)
)
;
/
/
文
本
内
容
c
o
n
s
o
l
e
.
l
o
g
(
("div").text()); // 文本内容 console.log(
("div").text());//文本内容console.log((“div”).html()); // 所选元素里的所有内容
//设置
$("div").html("<p>哈哈</p>"); // 能识别标签
//$("div").text("<p>哈哈</p>"); // 不能识别
//获取宽度
console.log($("div").css("width")); // 获取的是字符串
console.log($("div").width()); // 获取的是数字
console.log($("div").innerWidth()); // width+padding
console.log($("div").outerWidth()); // width+padding+border
console.log($("div").outerWidth(true)); // width+padding+border+margin
//设置
$("div").css("width","200px");
$("div").width(400);
//获取窗口的宽度
//console.log($(window).width());
//根据窗口调整尺寸
$(window).resize(function () {
//console.log($(window).width());
//console.log($(window).height());
})
//获取卷曲的距离
$(window).scroll(function () {
console.log($(this).scrollTop());
console.log($(this).scrollLeft());
})
//1.注册简单事件 : 一次只能注册一个
// $(“p”).click(function () {
// alert(“呵呵”)
// })
//2.注册多个事件 bind()
// $(“p”).bind(“click mouseenter”, function () {
// alert(“嘤嘤嘤”)
// })
//不同的事件处理不同的函数
// $("p").bind({
// click:function () {
// alert("嘤嘤嘤")
// },
// mouseenter: function () {
// alert("哼哼哼")
// }
// })
//点击按钮新增一个p标签
$("button").click(function () {
$("<p>我是新增的p标签</p>").appendTo($("div"))
})
//让新增的元素具有事件需要用委托事件 delegate(selector, type , callback)
// ① : 事件最终的执行者
// ② : 事件的类型
// ③ : 回调函数
$("div").delegate("p", "click" , function () {
console.log(this)
alert("哈哈哈")
})
// 委托事件不是自己执行, 而是把这个事件给被选中的子元素来执行
// 好处: 动态创建的也能有事件
// 注意 : 1.必须要是父子关系, 或者祖先与后背的关系
// 2. 这个父亲必须是html代码静态存在的
//1.给自己注册事件 -->p
// $("p").on("click", function () {
// alert("呵呵")
// })
//2.委托给别人注册事件 : 让动态的也能有事件
//点击按钮新增一个p标签
// $("button").click(function () {
// $("<p>我是新增的p标签</p>").appendTo($("div"))
// })
//
// $("div").on("click", "p", function () {
// alert("嘻嘻");
// })
//解绑事件 : off()
$("p").on("click mouseenter", function () {
alert("呵呵")
})
//$("p").off();//解绑匹配元素的所有事件
$("p").off("mouseenter");
$("button").on("click",function () {
//$("p:last").click();
//触发 trigger(type)
$("p:last").trigger('click');
})
$("a").on("click",function (e) {
alert("嗯嗯嗯你说的都对")
//阻止默认的事件
//e.preventDefault();
return false; // 在jq中既能阻止冒泡事件, 又能阻止默认的跳转事件
//阻止冒泡事件
//e.stopPropagation();
})
$("body").on("click", function () {
alert("好的呢")
})
// delay() 等待多少毫秒后
$("div").fadeIn(1000).delay(3000).fadeOut(1000);
//关于链式编程
// 设置性的操作: 可以链式编程
// 获取性的操作: 不能链式