为方便查询以及备忘，jquery的元素查找、取值赋值、属性添加等操作做了整理
<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><div id="id1" class="class1">测试<p>这是一段p文本后面将被添加class=blue的属性</p><div id="id1-1" class="class1-1" dataxxxx-id="data1-1"><a id="http1" href="https://www.ranjuan.cn">超链接00</a><a href="https://www.ranjuan.cn">超链接11</a><input id="input1" name="username" type="text" value="text1"/></div><div id="id1-2" class="class1-2" dataxxxx-id="data1-2"><a href="https://www.ranjuan.cn">超链接22</a></div><div id="id1-3" class="class1-3"><a href="https://www.ranjuan.cn">超链接33</a></div></div><script>//alert('精确指定id下的页面内容：'+$("#id1").html());//alert('精确指定class名字下的页面内容：'+$(".class1-1").html());//alert('精确指定id的class属性值：'+$("#id1").attr("class"));//alert('精确指定id的dataxxxx-id属性值：'+$("#id1-1").attr("dataxxxx-id"));//alert('模糊查找所有超链接a标签名字：'+$(".class1 a").text());//alert('模糊查找第一个超链接a标签名字：'+$(".class1 a").first().text());//alert('模糊查找最后一个超链接a标签名字：'+$(".class1 a").last().text());//alert('模糊查找div子列表最后一个div标签id：'+$(".class1 div").last().attr("id"));//alert('模糊查找div子列表第一一个div标签下第一个a标签：'+$(".class1 div a:first-child").html());//读取值//text() - 设置或返回所选元素的文本内容//html() - 设置或返回所选元素的内容（包括 HTML 标记）//val() - 设置或返回表单字段的值//alert($("#input1").val());//$("#input1").val('ranjuan.cn');$("input[name='username']").val('ranjuan.cn2');//隐藏指定id//$("#input1").hide();//$("#input1").show();//指定单击事件//alert($("#id1-1 a:first-child").attr("href"));//$("#id1-1 a:first-child").click();//设置属性$("#http1").attr("href","https://www.baidu.com");$("#id1").attr("style","color:red;font-size:50px;");//append() - 在被选元素的结尾插入内容//prepend() - 在被选元素的开头插入内容//after() - 在被选元素之后插入内容//before() - 在被选元素之前插入内容$("#id1").prepend("在开头追加++++");$("h1,h2,p").addClass("blue");//文档准备完毕后执行$(document).ready(function(){// 开始写 jQuery 代码...//$("#id1-1 a:first-child").click(function(){// alert('你点击了第一个超链接');//});$("#http1").click(function(){// 动作触发后执行的代码!!alert('你点击了第一个超链接++');});});</script></head>
关于jquery查询或操作的更多内容可以前往菜鸟教程：https://www.runoob.com/jquery/jquery-ref-selectors.html
另外jquery的post/get操作亦做简单记录（摘录自菜鸟教程）
$("button").click(function(){$.get("demo_test.php",function(data,status){alert("数据: " + data + "\n状态: " + status);});});
$("button").click(function(){$.post("/try/ajax/demo_test_post.php",{name:"菜鸟教程",url:"http://www.runoob.com"},function(data,status){alert("数据: \n" + data + "\n状态: " + status);});});
发表评论