语法

$(selector).action()jquery(selector).action()

selector 为选择器，使用选择器选择 HTML 元素

action() 为操作，对选中的元素进行操作

选择器

CSS 选择器

// 选取所有 id="id" 的元素
$("#id") // 选取所有 class="class" 的元素
$(".class")

// 选取 <p> 元素
$("p") // 选取所有 id="id" 的 <p> 元素
$("p#id") // 选取所有 class="class" 的 <p> 元素
$("p.class")

属性选择器

// 选取所有带有 href 属性的元素
$("[href]") // 选取所有带有 href 值等于 "#" 的元素
$("[href='#']") // 选取所有带有 href 值不等于 "#" 的元素
$("[href!='#']")

其他选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

练习

$(this).hide()

<button></button><script src="js/jquery.js"></script><script>$(document).ready($("button").click($(this).hide();););
</script>

获取数据

获取属性

// 用于获取属性值
attr()

<a href="www.baidu.com" id="baidu">www.baidu.com</a><button>显示 href 值</button><script src="js/jquery.js"></script><script>$(document).ready(function () {$("button").click(function () {alert($("#baidu").attr("href"));});});
</script>

获取 input 标签的 value 值

// 用于获得输入字段的值
val()

<input type="text" id="text"><button>显示输入信息</button><script src="js/jquery.js"></script><script>$(document).ready(function () {$("button").click(function () {alert($("#text").val());})});
</script>

遍历函数

// 对 jQuery 对象进行迭代
// 为每个匹配元素执行函数
each()

<ul><li>Coffee</li><li>Milk</li><li>Coke</li>
</ul><button>输出每个列表项的值</button><script src="js/jquery.js"></script><script>$(document).ready(function () {$("button").click(function () {//遍历每个li标签，每个匹配的li标签，输出他的内容$("li").each(function () {alert($(this).text())});});});
</script>

<input id="1" type="checkbox"> one <br>
<input id="2" type="checkbox"> two <br>
<input id="3" type="checkbox"> three <br>
<input id="submitcheckbox" type="button" value="显示选择结果"><script src="js/jquery.js"></script><script>$(document).ready(function () {$("#submitcheckbox").click(function () {var i = 0;var id = new Array();//代表选取input标签， type="checkbox" 的元素$("input:checkbox").each(function () {//如果被选中,this代表发生事件的dom元素，<input>if ($(this).is(':checked')) {//获取id的值，存储到id数组当中id[i] = $(this).attr("id");i++;}});alert(id);});});
</script>