文章目录
- 前端--jQuery常用方法
- 1. 表单元素设置和读取属性的方法
- 2. 设置和读取表单的value值
- 3. jq中的索引值index()方法
- 4. jq创建元素的三种方式
- 5. 常见的追加元素的方法
- 6. jq中循环each()方法
- 7. jq的事件委派机制on()方法
- ☆
前端–jQuery常用方法
1. 表单元素设置和读取属性的方法
checked,selected,disabled 要用prop函数来读取和设置值，千万不要用attr。attr能做的事情，prop都可以做。以后开发的时候，设置和获取属性值，用prop函数。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单元素设置和读取属性的方法</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
// $("#btn").click(function(){
// // console.log($(this).attr("text"));
// // $(this).attr("text","text");
//
// // console.log($("input").attr("checked"));
//
// // $("input").removeAttr("checked");
// // $("input").attr("checked","checked");
//
// // var attr=$("input").attr("checked");
// // if(attr!=undefined){
// // console.log("选中");
// // }else{
// // console.log("未选中");//手动选中不打印？？
// // }
//
// // console.log($("input").prop("checked"));
// // $("input").prop("checked",true);
// })
/***
*
*/
$("button:eq(0)").click(function () {
var prop = $("input").prop("checked");
console.log( "获取checkbox是否被选中："+ prop);
});
$("button:eq(1)").click(function () {
$("input").prop("checked", true);
});
$("button:eq(2)").click(function () {
$("input").prop("checked", false);
});
$("button:eq(3)").click(function () {
var prop = $("div").prop("title");
console.log("div的title：" + prop);
});
});
</script>
</head>
<body>
<!--<button id="btn" text="btn">按钮</button>-->
<button text="btn">获得checkbox的值</button>
<br>
<br>
<button text="btn">选中</button>
<button text="btn">不选中</button>
<input type="checkbox">
<br>
<br>
<button text="btn">获取div的属性值</button>
<div title="我是一个div">
</div>
</body>
</html>2. 设置和读取表单的value值
获取文本值，会存在如下结果：
如果是使用attr("value")获取值，拿到是value属性中的值，当我修改了文本框之后，获取到值不变。如果是使用的prop("value")获取值，拿到是value属性中的值，但修改了文本框内容后，获取到的值是改变的。如果是使用的val()获取值，拿到是value属性中的值，但修改了文本框内容后，获取到的值是改变的。(推荐使用val())
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>设置和读取表单的value值</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
var prop = $("input").attr("value");
console.log(prop);
var prop = $("input").prop("value");
console.log(prop);
console.log($("input").val());
})
});
</script>
</head>
<body>
<button id="btn">按钮</button>
<input type="text" value="hello justweb">
</body>
</html>3. jq中的索引值index()方法
$(this).index();此处的index()方法返回指定元素相对于其他指定元素的 index 位置。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq中的索引值index()方法</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
cursor: pointer;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("ul>li,span").click(function () {
console.log($(this).index());
})
});
</script>
</head>
<body>
<ul>
<span>0</span>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</body>
</html>jq中的索引值index()方法
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq中的索引值index（）方法</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
cursor:pointer;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$("ul>li>a,div").click(function(){
console.log($(this).parent().index());
})
});
</script>
</head>
<body>
<ul>
<li><a href="##">点击跳转01</a></li>
<li><a href="##">点击跳转02</a></li>
<li><a href="##">点击跳转03</a></li>
<li><a href="##">点击跳转04</a></li>
<li><a href="##">点击跳转05</a></li>
<div>0</div>
</ul>
</body>
</html>4. jq创建元素的三种方式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq创建元素的三种方式</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
var num = 0;
// 第一种方式：通过html（） 将标签写入到目标中，但是这种方式会存在一个问题：
// 每次写入都会先清空目标对象中标签，然后在写入新的标签。
$(".btn:eq(0)").click(function () {
var str = '<li class="one"><a href="">' + num++ + '</a></li>';
var htmlStr = "";
htmlStr = $("#list").html() + str;
$("#list").html(htmlStr)
});
// 第二种方式
$(".btn:eq(1)").click(function () {
//将其转为jq
var li = $('<li class="one"><a href="">' + (num++) + '</a></li>');
$("#list").append(li);
});
// 第三种方式
// jq底层将字符串转成元素。然后追加到目标对象中。
$(".btn:eq(2)").click(function () {
var li = '<li class="one"><a href="">' + (num++) + '</a></li>';
$("#list").append(li);
})
// 然而用js写的话
// <li class="one"><a href=""></a></li>
// $(".btn:eq(0)").click(function () {
// var ul1 = document.getElementById("#list");
// var li = document.createElement("li");
// li.setAttribute("class", "one");
// var a = document.createElement("a");
// a.innerText = num++;
// li.appendChild(a);
// ul1.appendChild(li);
// })
});
</script>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<ul id="list">
</ul>
</body>
</html>5. 常见的追加元素的方法
记住最前面的4个，后面4个不要记。
父子关系
A.append(B) 在A标签中最后添加B标签A.prepend(B) 在A标签中最前面添加B标签。
兄弟关系
A.after(B) 在A标签后面添加B标签A.before(B) 在A标签前面添加B标签
- 父子关系
- A.appendTo(B) 将A标签添加到B标签中的最后面
- A.prependTo(B) 将A标签添加到B标签中的最前面
- 兄弟关系
- A.insertAfter(B) 将A标签添加到B标签的最后面
- A.insertBefore(B)将A标签添加到B标签的最前面
A.empty(); 清空A元素的文本的内容A.remove(); 删除A元素。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>常见的追 加元素的方法</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
var num = 0;
$("button:eq(0)").click(function () {
$("ul").append("<li>新元素</li>");
});
$("button:eq(1)").click(function () {
$("ul").prepend("<li>新元素</li>")
});
$("button:eq(2)").click(function () {
$("<li>新元素</li>").appendTo("ul");
});
$("button:eq(3)").click(function () {
$("<li>新元素</li>").prependTo("ul");
});
$("button:eq(4)").click(function () {
$("ul>li:eq(0)").after("<li>新元素" + (num++) + "</li>");
});
$("button:eq(5)").click(function () {
$("ul>li:eq(3)").before("<li>新元素" + (num++) + "</li>");
});
$("button:eq(6)").click(function () {
$("<li>新元素" + (num++) + "</li>").insertAfter("ul>li:eq(2)");
})
$("button:eq(7)").click(function () {
$("<li>新元素" + (num++) + "</li>").insertBefore("ul>li:eq(2)");
})
$("button:eq(8)").click(function () {
$("ul>li:first").remove();
});
$("button:eq(9)").click(function () {
$("ul>li:last").empty();
});
});
</script>
</head>
<body>
<button>append</button>
<button>prepend</button>
<button>appendTo</button>
<button>prependTo</button>
<br>
<br>
<button>after</button>
<button>before</button>
<button>insertAfter</button>
<button>insertBefore</button>
<br>
<br>
<button>remove</button>
<button>empty</button>
<ul>
ul0
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
ul1
</ul>
</body>
</html>6. jq中循环each()方法
each 循环函数
目标.each(function(index,e){ })，循环目标中的每一个元素，循环的次数根据目标的个数决定。- 参数：
- index: 相当于索引，或者说是
for循环中的i- e: 是每个元素的js对象，相当于this。
$(this).index()是当前元素在父元素中的排位的顺序的编号。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq中循环each()方法</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
//.length 获取jq对象的长度。
console.log("li标签的个数："+ $("ul>li").length);
console.log("传统方式遍历li：");
for (var i = 0; i < $("ul>li").length; i++) {
var li = $("ul>li").eq(i);
console.log(li.text());
}
console.log("each()遍历li:");
// 此处的index索引，是元素真实的索引号，
// 不是元素在父标签中的位置了。
// ele 是 遍历的每一个元素。相当于this
$("ul>li").each(function (index, ele) {
console.log(ele);
console.log(index); //从0开始
console.log($(this).index());//从1开始 因为有span标签
console.log($(ele).text()); //从1开始
console.log("--------------------------------");
})
});
</script>
</head>
<body>
<ul>
<span>span</span>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>7. jq的事件委派机制on()方法
事件委托的方式绑定事件
- 通过目标事件捕获到后代元素，在从后代元素冒泡到目标触发事件。$(this)指的还是事件的目标。
事件绑定三个参数：
- 绑定的事件类型
- 给哪些元素绑定事件
- 事件触发后执行的回调函数。
常用绑定事件：
on();绑定事件。off();让on绑定的事件失效。bind();绑定事件unbind();解绑事件。- one();事件触发一次之后就失效了。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jq的事件委派机制on()方法</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
//普通绑定，此种绑定，不支持动态添加数据。
// $("ul>li>a").click(function(){
// console.log($(this).text());
// })
$("ul").on("click","li a",function(){
console.log($(this).text());
});
$("button").click(function(){
$("ul").append('<li><a href="##">1</a></li>');
// $("ul").off();
})
});
</script>
</head>
<body>
<button>添加一个元素</button>
<ul>
<li><a href="##">1</a></li>
<li><a href="##">2</a></li>
<li><a href="##">3</a></li>
<li><a href="##">4</a></li>
<li><a href="##">5</a></li>
</ul>
</body>
</html>☆
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
