jQuery的属性操作
1. element.prop("属性名") 获取元素固有的属性值
element.prop("属性名","属性值") 设置元素固有属性值
2. 元素的自定义属性 我们通过 attr()
3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
<a href="http://ww.hao123.com"></a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>234</span>
<script>
console.log($('a').prop("href"));
console.log($('a').prop("href","http://www.baidu.com"));
$("input").change(function(){
console.log($(this).prop("checked"));
})
console.log($("div").attr("index"));
console.log($("div").attr("data-index"));
$("span").data("name","lht")
console.log($("span").data("name"));
内容文本值
1. 获取设置元素内容 html() 相当于原生的innerHTML
2. 获取设置元素文本内容 text() 相当于原生的innerText
3. 获取设置表单值 val() 相当于原生的value
<div>
<span>内容</span>
</div>
<input type="text" value="请输入内容">
<script>
console.log($("div").text());
console.log($("div").text("abc"));
console.log($("input").val());
console.log($("input").val("123"));
返回祖先元素
<div class="one">
<div class="two">
<div class="three">
<div class="four">学好jquery</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
console.log($(".four").parents());
console.log($(".four").parents(".one"));
</script>
遍历元素
jquery隐式迭代时对同一类元素进行相同的操作,如果要对同一类元素做不同的操作就需要进行遍历
.each() 方法遍历元素
$.each() 方法遍历元素 主要用于遍历数据,处理数据
遍历对象
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$("li").each(function (i, domEle) {
// 回调函数的锶一个参数 一定是索引号 名字自定义的
console.log(i);
// 第二个参数 一定是dom元素 名字也是自定义的 你注意:dom元素不能使用jq的方法
console.log(domEle);
})
$.each($("li"), function (index, ele) {
console.log(index);
console.log(ele);
})
var obj = {
name:"tom",
age:18
}
$.each(obj, function(i,ele){
console.log(i);//获取的是对象的属性名
console.log(ele);//获取的是对象的属性值
})
</script>
创建添加删除元素
ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
//1、创建元素
var li = $("<li>我是后来的li</li>");
//2、添加元素
//(1)内部添加 形成父子关系
$("ul").append(li)//内部添加并且放到元素的最后面
$("ul").prepend(li);//内部添加并且放到元素的最前面
//(2)外部添加 形成兄弟关系
var div = $("<div>我是后来的div</div>")
// $(".test").before(div);
$(".test").after(div);
//3、删除元素
// $("ul").remove() //删除所有匹配的元素及内部元素 自杀
$("ul").empty(); //删除匹配元素的子元素 孩子
$("ul").html(""); //删除匹配元素的子元素 孩子
</script>
元素大小
// 1. width() / height() 获取设置元素 width和height大小
// console.log($("div").width());
// console.log($("div").width(300));
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
元素位置
// 1、获取设置距离文档的位置(偏移)offset
// 注意:父亲有没有定位不影响我的偏移值
// $(".son").offset({
// left: 200,
// top: 200
// })
//2. 获取距离带有定位父级位置(偏移) position
//如果没有带有定位的父级,则以文档为准
console.log($(".son").position());
事件处理
// 1. 单个事件注册
// $("div").click(function () {
// $(this).css("backgroundColor", "blue")
// })
// $("div").mouseover(function () {
// $(this).css("backgroundColor", "purple")
// })
//2、on
//on方法绑定一个或者多个事件处理程序
// $("div").on({
// click: function () {
// $(this).css("backgroundColor", "blue")
// },
// mouseover: function () {
// $(this).css("backgroundColor", "purple")
// }
// })
$("div").on("mouseover mouseout", function () {
$(this).toggleClass("current")
})
//实现事件委派(委托)
// click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
$("ul").on("click", "li", function () {
console.log(11);
})
//给未来创建的元素绑定事件
// $("ol li").click(function () {
// console.log(11);
// })
$("ol").on("click", "li", function () {
console.log(11);
})
var li = $("<li>我是未来的元素</li>");
$("ol").append(li)
事件解绑
<script>
$(function () {
$("div").on({
click: function () {
console.log("我点击了");
},
mouseover: function () {
console.log('我鼠标经过了');
}
});
// $("div").off();//括号里没有参数 就是全部解绑
$("div").off("click");//指定解绑某一个事件类型
$("ul").on("click", "li", function () {
alert(1)
})
// 解绑事件委托
$("ul").off("click", "li")
//one() 只能触发一次
$("p").one("click", function () {
console.log($("p").html());
})
})
</script>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是好人 </p>
自动触发事件
<div></div>
<input type="text" value="111">
<script>
$("div").click(function () {
console.log(11);
})
//1、元素.事件()
$("div").click();
//2. 元素.trigger("事件") 会触发元素的默认行为
$("input").trigger("focus")
//3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function () {
$("input").val("222")
})
// $("input").triggerHandler("focus")
</script>