通过id选择器获取元素点击按钮显示效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>// 页面加载事件$(function(){// 根据id选择器获取按钮,添加点击事件,修改按钮的value属性值$("#btn").click(function(){// this.value = "哈哈";// 错误的// this.val('哈哈');console.log($(this).val());$(this).val('嘎嘎,下雨了');});});</script></head><body><input type="button" value="显示效果" id="btn"></body></html>
标签选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>/*** id选择器* $("#id属性的值")---->某个元素* 标签选择器* $("标签名字")---->多个元素或者是某个元素* */// .text()方法相当于DOM中的.innerText属性// 对象.text()---->获取该元素的文本内容// 对象.text('值')---->设置该元素的文本内容// 本身代码没有循环操作,jQuery中内部帮助我们循环操作的---->隐式迭代// 页面加载的事件$(function(){// 根据id选择器获取按钮,添加点击事件$("#btn").click(function(){// 根据标签选择器获取p标签$("p").text('我们都是p');});}); </script></head><body><input type="button" value="显示效果" id="btn"><p>鸣人</p><p>佐助</p><p>卡卡西</p><p>自来也</p><p>大蛇丸</p></body></html>
类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.cls{width:200px;height: 100px;background-color: pink;}</style><script src="jquery-1.12.1.js"></script><script>// 类选择器:$(".类样式的名字")----某个或者是多个// .css("属性","值");----设置某个元素的css样式属性值$(function(){// 根据id选择器获取按钮,添加点击事件$("#btn").click(function(){// 获取所有应用cls类样式的元素,改变背景颜色$(".cls").css("backgroundColor","yellow");$(".cls").css("border",'1px solid red');});});</script></head><body><input type="button" value="显示效果" id="btn"><div class="cls"></div><p class="cls">这是一个p</p><p>山东盛产一种补药,药力极强</p></body></html>
交集选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><style>.cls {background-color: blue;}</style><script>$(function(){// 根据id选择器获取按钮,添加点击事件$("#btn").click(function(){// 交集选择器----标签+类选择器// 先找p标签,从p标签中找应用了cls样式的元素$("p.cls").css("backgroundColor","green");});});</script></head><body><input type="button" value="显示效果" id="btn"><p class="cls">小苏喜欢助教很久了</p><p>其实助教也喜欢小苏</p><ul><li>小苏</li><li>助教</li><li>班主任</li></ul><span class="cls">我和小苏坐地铁上班</span></body></html>
并集选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 400px;height: 200px;background-color: green;}.cls {background-color: red;}</style><script src="jquery-1.12.1.js"></script><script>/*** 交集选择器 标签名.类样式的名字* 并集选择器 选择器,选择器,选择器...*/// 页面加载的事件$(function(){$("#btn").click(function(){// div,p,span$("#dv,p,.cls").css("backgroundColor","orange");});});</script></head><body><input type="button" value="显示效果" id="btn"><div id="dv"></div><p>这是一个p</p><span class="cls">这是一个span</span><ul><li>小苏喜欢吃榴莲</li><li>助教喜欢吃臭豆腐</li><li>班主任都喜欢吃</li></ul></body></html>
