jQuery常用方法：01_each
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<script type="text/javascript">
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
// var stu1 = {
// sname: '张三',
// sal: 10000
// }
var arr = [
{
sname: '张三',
sal: 10000
},
{
sname: '李四',
sal: 20000
},
{
sname: '王五',
sal: 30000
}
];
$(arr).each(function (index,element) {
console.log(element.sname + ":" + element.sal)
})
</script>
</body>
</html>
jQuery常用方法：02_append_prepend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
// 父节点.append(子节点)执行追加操作
$("ul").append($("div"))
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend($("div"))
</script>
</body>
</html>
jQuery常用方法：03_after_before
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素外</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(兄弟关系)
$("ul").after($("div"))
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before($("div"))
</script>
</body>
</html>
jQuery常用方法：04_find_attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type="text" name="username" value="张三"/>
</td>
<td>
<input type="password" name="password" value="123456" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性
console.log($("form input:first").attr("type"))
console.log($("form").find('input:first').attr("type"))
//设置form里最后个input元素的为只读文本框
$("form").find('input:last').attr("readonly",'readonly')
</script>
</body>
</html>
jQuery常用方法：05_create_element_text_attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<span>123</span>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
<body><div id="2015">哈哈</div></body>
//jquery方式
$("body").html('<div id="2015">哈哈</div>')
</script>
</body>
</html>
jQuery常用方法：06_remove_element
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="a">
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<ul id="b">
<li>第一条</li>
<li id="secondID">第二条</li>
<li>第三条</li>
</ul>
<div>这是div元素</div>
<script type="text/javascript">
//删除ID为secondID的LI元素
//父节点.removeChild(子节点)
//子节点.remove()
$("li[id='secondID']").remove()
//删除所有LI元素
$("li").remove()
//删除UL元素
$("ul").remove()
</script>
</body>
</html>
jQuery常用方法：07_val_text_html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div>
哈哈
</div>
<select id="city">
<option value="地都">北京</option>
<option value="魔都">上海</option>
</select>
<script type="text/javascript">
//取得<div>中的内容
$("div").html("你好")
console.log($("div").text())
//取得<option>的值和描述
$("select option").each(function (i,e) {
var $_e = $(e);
console.log($_e.val() + ":" + $_e.html())
})
</script>
</body>
</html>
jQuery常用方法：08_clone_true
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<input type="button" value="原按钮"/>
<script type="text/javascript">
//复制原input元素，添加到原input元素后，与其同级
var $input = $("input").clone().val("新按钮");
$("input").after($input);
//为原input元素动态添加单击事件
$("input").click(function () {
alert("原按钮点击事件")
})
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $input = $("input").clone(true).val("新按钮");
$("input").after($input);
</script>
</body>
</html>
jQuery常用方法：09_replaceWith
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<table border="1" align="center">
<tr>
<td>
<div >
双击会被替换成文本框
</div>
</td>
<td>
不会变
</td>
</tr>
</table>
<script type="text/javascript">
//双击<div>中的文本，用文本框替换文本
$("div").dblclick(function () {
$(this).replaceWith('<input type="text">');
});
</script>
</body>
</html>
jQuery常用方法：10_removeAttr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<table>
<tr>
<td>
添加属性border/align/width
</td>
<td>
删除属性align
</td>
</tr>
</table>
<script type="text/javascript">
//为<table>元素添加属性border/align/width
$("table").attr("border","1px solid red").attr("align","center").attr('width', '600');
//将<table>元素的align属性删除
$("table").removeAttr('align');
</script>
</body>
</html>
jQuery常用方法：11_addClass_removeClass_toggleClass_hasClass
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div>无样式</div>
<div class="myClass">有样式</div>
<script type="text/javascript">
//为无样式的DIV添加样式
$("div:not([class])").addClass('myClass');
//为有样式的DIV删除样式
$("div[class]").removeClass('myClass');
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass('myClass');
//最后一个DIV是否有样式
console.log($("div:last").hasClass('myClass'))
</script>
</body>
</html>
jQuery常用方法：12_offset_width_height
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<img src="../images/222.png"/>
<script type="text/javascript">
//获取图片的坐标
var $offset = $("img").offset();
console.log($)
console.log($offset.left)
//设置图片的坐标
$("img").offset({top: 100,left: 100});
//获取图片的宽高
console.log($("img").width())
console.log($("img").height())
//设置图片的宽高
$("img").width(500)
$("img").height(300)
</script>
</body>
</html>
jQuery常用方法：13_children_next_prev_siblings
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<p>Hello</p>
<div>
<span>
Hello Again
<b>
Bold
</b>
</span>
</div>
<p>And Again</p>
<span>And Span</span>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
console.log($("div").children().text())
//取得div元素的下一个同级的兄弟元素内容
console.log($("div").next().text())
//取得div元素的上一个同级的兄弟元素内容
console.log($("div").prev().text())
//依次取得div元素的上下一个同级的所有兄弟元素的内容
$("div").siblings().each(function () {
console.log($(this).text())
})
</script>
</body>
</html>
jQuery常用方法：14_show_hide
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<p>
<img src="../images/222.png"/>
</p>
<script type="text/javascript">
//图片隐蔽
$("img").hide(3000, function() {
alert("你看不见了吧")
});
//休息3秒
$("img").show(3000, function() {
alert("你看到我了吧")
});
</script>
</body>
</html>
jQuery常用方法：15_fadeIn_fadeOut
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<p>
<img src="../images/222.png" />
</p>
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000, function() {
alert("你看到我了吧")
});
//淡出隐蔽图片
$("img").fadeOut(3000, function() {
alert("你看到我了吧")
});
</script>
</body>
</html>
jQuery常用方法：16_slideUp_slideDown
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body>
<div>
中国0<br/>
中国1<br/>
中国2<br/>
中国3<br/>
中国4<br/>
中国5<br/>
中国6<br/>
中国7<br/>
中国8<br/>
中国9<br/>
</div>
<input type="button" value="我的好友"/>
<script type="text/javascript">
//向上下滑动
$("input").click(function () {
$("div").slideUp(1000)
})
$("input").dblclick(function () {
$("div").slideDown(1000)
})
$("input").click(function () {
$("div").slideToggle(1000)
})
</script>
</body>
</html>
