1.操作属性
-
attr 可以操作一切属性 但是建议值不要为true和false
-
获取：Jquery对象.attr("属性名")
-
设置：Jquery对象.attr("属性名","属性值")
-
移除：Jquery对象.removeAttr("属性名")
-
// 1.获取
console.log($("div").attr("class"))
console.log($("div").attr("a"))
console.log($("input").attr("type"))
console.log($(":checkbox").attr("checked"));//undefined/checked
// 2.设置
$('div').attr("b", "这是自定义属性b")
$('div').attr("id", "wrap1")
$("input").attr("value", "123")
// 3.移除
$("div").removeAttr("a");
$("div").removeAttr("id");
$("input").removeAttr("type");
-
prop 操作固有属性 建议属性值为true和false
-
获取：Jquery对象.prop("属性名")
-
设置：Jquery对象.prop("属性名","属性值")
-
//1.获取
console.log($("div").prop("class"))
console.log($("div").prop("a"))
console.log($("input").prop("type"))
console.log($(":checkbox").prop("checked"))
// 2.设置
$("div").prop("class", "box1")
$(":text").prop("value", "123")
2.操作类名
-
Jquery对象.addClass("类名1 类名2") 添加类名 在原有类名的基础上追加类名
-
Jquery对象.removeClass("类名") 删除类名
-
Jquery对象.toggleClass("类名") 切换类名 如果有，执行该方法就删除 如果没有 执行该方法就是添加
-
Jquery对象.hasClass("类名") 判断当前元素是否有该类名 返回值true/false
-
Jquery对象.is("选择器") 判断jquery对象是否属于某个选择器
//1.给div添加类名pink
$("div").addClass("pink blue")
// 2.删除类名
$("div").removeClass("box")
// 3.切换类名
$("div").toggleClass("pink")
// 4.判断类名
var res = $("div").hasClass("pink")
console.log(res)
// 5.是否属于某个选择器
var res1 = $(".box1").is("ul");
console.log(res1)
3.操作样式
-
获取样式 Jquery对象.css("样式名") 所有的样式都可以获取
-
设置样式 Jquery对象.css("属性名","属性值") 单个设置
-
设置样式 Jquery对象.css({属性名:属性值,属性名:属性值.......}) 批量设置
-
注意1：如果属性名带引号 样式名可以和css一样
-
注意2：如果属性名不带引号 样式名要用驼峰命名
-
注意3：属性值是字符串形式 但是可以省略px 写成数字形式
-
注意4：可以使用累加
-
<script>
// 1.获取样式 Jquery对象.css("样式名") 所有的样式都可以获取
console.log($("div").css("width"))
console.log($("div").css("height"))
console.log($("div").css("background-color"))
// 2.设置样式 Jquery对象.css("属性名","属性值") 单个设置
$("div").css("color", "pink");
$("div").css("width", "500px").css("height", "500px")
// 3.设置样式 Jquery对象.css({属性名:属性值,属性名:属性值.......}) 批量设置
// 注意1：如果属性名带引号 样式名可以和css一样
var cssObj = {
"width": "1000px",
"height": "1000px",
"background-color": "blue"
}
$("div").css(cssObj)
// 注意2：如果属性名不带引号 样式名要用驼峰命名
var cssObj = {
width: "1100px",
height: "1100px",
backgroundColor: "red"
}
$("div").css(cssObj)
// 注意3：属性值是字符串形式 但是可以省略px 写成数字形式
var cssObj = {
width: 1200,
height: 1300,
backgroundColor: "pink"
}
$("div").css(cssObj)
// 注意4：可以使用累加
var cssObj = {
width: "+=100",
height: "+=100",
backgroundColor: "pink"
}
$("div").css(cssObj)
</script>
4.map和each循环
-
each 写法1 $(选择器/循环体).each(function(index,item){})
-
each 写法2 $.each(循环,function(index,item){})
-
map 写法1 $(选择器/循环体).map(function(index,item){})
-
map 写法2 $.map(循环,function(index,item){})
-
==map和each的区别 map可以加return 有返回值 each没有返回值==
<script>
// each
// each 写法1 $(选择器/循环体).each(function(index,item){})
$("li").each(function (index, item) {
console.log(index, item)//第一个参数是当前元素的下标 第二个参数是当前元素
})
// each 写法2 $.each(循环,function(index,item){})
$.each($("li"), function (index, item) {
console.log(index, item)//第一个参数是当前元素的下标 第二个参数是当前元素
})
// map
// map 写法1 $(选择器/循环体).map(function(index,item){})
$("li").map(function (index, item) {
console.log(index, item)//第一个参数是当前元素的下标 第二个参数是当前元素
})
// map 写法2 $.map(循环,function(index,item){})
$.map($("li"), function (index, item) {
console.log(index, item);// 第一个参数是当前元素 第二个参数是当前元素的下标
})
// map和each的区别 map可以加return 有返回值 each没有返回值
var arr = ["嘻嘻", "哈哈", "嘿嘿", "滴滴"]
var newArr = $.each(arr, function (index, item) {
console.log(index, item)
// return item + "1"
})
console.log(newArr, arr)
//map循环
var arr = ["嘻嘻", "哈哈", "嘿嘿", "滴滴"]
var newArr = $.map(arr, function (index, item) {
console.log(index, item)
return index + "1"
})
console.log(newArr, arr)
</script>
5.操作内容
-
闭合标签
-
获取文本内容：Jquery对象.html() Jquery对象.text()
-
设置文本内容：Jquery对象.html(设置的内容) Jquery对象.text(设置的内容)
-
html和text的区别
-
相同点：重新闭合标签的文本内容
-
不同点：html识别标签 text不识别标签
-
-
//获取
console.log($("div").html())
console.log($("div").text())
//设置
$("div").html("这是一个新的内容")
$("div").text("这是一个新的内容text")
//区别
$("div").html("<b>这是一个新的内容</b>")
$("div").text("<b>这是一个新的内容</b>")
-
表单元素
-
获取：Jquery对象.val()
-
设置：Jquery对象.val(设置的内容)
-
console.log($("input").val())
$("input").val(45678)
6.BOM
6.1获取元素的宽高
-
获取/设置元素的宽高(==取赋值一体化==)
-
实际内容宽和高 width() height()
-
可视宽和可视高 innerWidth() innerHeight() content+padding
-
占位宽和占位高 outerWidth(布尔值) outerHeight(布尔值)
-
false(默认值) content+pading+border true content+pading+border+margin
-
获取元素的滚动距离 scrollTop()和scrollLeft()
-
-
<script>
// 1.获取
// 实际内容宽和高 width() height()
console.log($("div").width())
console.log($("div").height())
// 可视宽和可视高 innerWidth() innerHeight() content+padding
console.log($("div").innerWidth())
console.log($("div").innerHeight())
// 占位宽和占位高 outerWidth() outerHeight()
// false(默认值) content+pading+border true content+pading+border+margin
console.log($("div").outerWidth(true))
console.log($("div").outerHeight(true))
// 获取元素的滚动距离 scrollTop()和scrollLeft()
$(window).scroll(function () {
console.log($(window).scrollTop())
console.log($(window).scrollLeft())
})
// 2.设置 取赋值一体化
$("div").width(1000)
$("div").height(1000)
$("div").innerWidth(2000)
$("div").innerHeight(2000)
$("div").outerWidth(3000, true)
$("div").outerHeight(3000, true)
$(window).scrollTop(100)
</script>
6.2元素的位置
-
position():获取当前元素的定位距离 以对象的形式返回
-
offset() offset 获取元素距离body的偏移位置
// 1.position 获取元素的定位距离
console.log($("div").position());//{top: 50, left: 50}
console.log($("div").position().top);//50
// 2.offset 获取元素距离body的偏移位置
console.log($("div").offset().left)
7.DOM
-
创建节点 $("标签节点")
// 1.创建节点 $("标签节点")
var li = $("<li>文本内容</li>");
console.log(li)
-
父元素末尾追加
-
写法1： 父元素.append(子)
-
写法2： 子元素节点.appendTo(父元素)
-
// 2.父元素末尾追加
// 写法1： 父元素.append(子)
$("ul").append(li);
// 写法2： 子元素节点.appendTo(父元素)
li.appendTo($("ul"))
-
父元素头部追加
-
写法1： 父元素.prepend(子元素)
-
写法2： 子元素节点.prependTo(父元素)
-
// 3.父元素开头追加
// 写法1： 父元素.prepend(子元素)
$("ul").prepend(li);
// 写法2： 子元素节点.prependTo(父元素)
li.prependTo($("ul"));
-
在参考元素之前插入
-
写法1 参考元素.before(新元素)
-
写法2 新元素.insertBefore(参考元素)
-
// 4.插入节点 在参考元素节点之前插入
// 写法1 参考元素.before(新元素)
// $("li:eq(1)").before(li)
// 写法2 新元素.insertBefore(参考元素)
// li.insertBefore($("li").eq(2))
-
在参考元素之后插入
-
写法1 参考元素.after(新元素)
-
写法2 新元素.insertAfter(参考元素)
-
// 5.插入节点 在参考元素节点之后插入
// 写法1 参考元素.after(新元素)
$("li").eq(1).after(li)
// 写法2 新元素.insertAfter(参考元素)
li.insertAfter($("li").eq(2))
-
删除元素
-
remove 删除当前元素 返回被删除掉的元素 不包含原来元素的行为
-
detach 删除当前元素 返回被删除掉的元素 包含原来元素的行为
-
empty 清空元素
-
$("li").click(function () {
console.log($(this).html())
})
// 点击删除按钮
$("button").click(function () {
// var list = $("li").remove();
var list = $("li").detach();
console.log(list)
$("ul").append(list)
})
// $("ul").empty();//清空ul下的所有子节点
-
克隆节点
-
参考节点.clone(布尔值) false/不传值：不克隆行为 true：克隆行为
-
var btn = $("button").clone(true);
console.log(btn)
$("ul").append(btn);
8.事件
8.1事件对象
-
事件处理函数中的第一个参数就是事件对象
$("button").click(function (ev) {
console.log(ev);//Jquery中的事件对象
console.log(ev.originalEvent);//原生的js事件对象
console.log(ev.type);//事件类型
console.log(ev.target);//目标值
console.log(ev.key)//键盘字符
console.log(ev.keyCode);//键盘字符编码
console.log(ev.clientX, ev.clientY)
console.log(ev.pageX, ev.pageX)
})
8.2绑定事件
8.2.1click方式绑定
-
click方式同时绑定多个事件 不会覆盖
$("button").click(function () {
console.log(1)
})
$("button").click(function () {
console.log(2)
})
8.2.2on方式绑定
-
用途1：给一个元素绑定一个事件
-
jquery对象.on(事件类型,事件处理函数)
-
$("button").on("click", function () {
console.log(3)
})
$("button").on("click", function () {
console.log(4)
})
-
用途2：给一个元素的多个事件绑定同一个事件处理函数
-
jquery对象.on("事件类型 事件类型....",事件处理函数)
-
$("button").on("click mouseover mouseout", function () {
console.log("点击 移入 移出")
})
-
用途3：给一个元素的多个事件添加不同的处理函数
-
jquery对象.on({事件:事件处理函数，事件:事件处理函数......})
-
$("button").on({
click: function () {
console.log("点击1")
},
mouseover: function () {
console.log("移入1")
}
})
-
用途4：自定义事件
-
自定义事件必须通过trigger方法触发
-
// 用途4：自定义事件
$("button").on("abc", function () {
console.log("abc自定义事件类型")
})
$("button").trigger("abc")
8.2.3one方式绑定
-
one 也是绑定事件 只会触发一次
$("button").one("click", function () {
console.log("one")
})
8.3事件委托
-
父元素.on(事件类型,子元素，事件处理函数) this指向触发事件的对象
// 父元素.on(事件类型,子元素，事件处理函数) this指向触发事件的对象
$("div").on("click", "button", function () {
console.log($(this).html())
})
扫一扫
1447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
