jQuery
使用jQuery要引用jQuery文件
<head></head>写在头里
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
一、JS和jQuery中选取元素
js中选取元素
<body>
<div></div>
<span id="aa"></span>
<p class="bb"></p>
<input type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = document.getElementById("aa");//根据id获取
var a = document.getElementsByClassName("bb");//根据class获取
var a = document.getElementsByName("cc");//表单元素根据name获取
var a = document.getElementsByTagName("div");//根据标签名查找
</script>
jQuery中获取元素
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa"></span>
<p class="bb"></p>
<input type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = $("#aa");//根据id找
var a = $(".bb");//根据class找 class找到的是数组所以可以取索引
alert(a[0]);
alert(a[1]);
var a = $("div");//根据标签名查找 找到的是数组所以可以取索引
alert(a[1]);
var a = $("[name='cc']");//根据属性查找
var a = $("[id='aa']");//根据属性查找
var a = $("div").children("#dd");//取子类
</script>
二、操作内容
js操作内容
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa"><a>你好大家</a></span>
<div class="bb"><p>大家好</p></div>
<input type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = document.getElementById("aa");
var b = document.getElementsByClassName("bb");
var c = document.getElementsByName("cc");
a.innerHTML = "<p>你好大家</p>"//修改代码和文字
b.innerText //修改文字信息
c.value//修改表单元素的value值
</script>
jQuery操作内容
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa"><a>你好大家</a></span>
<div class="bb"><p>大家好</p></div>
<input type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = $("#aa");
var b = $(".bb");
var c = $("[name='cc']");
a.html("<p>你好大家</p>")//修改代码和文字//取值（）为空
b.text("hao")//修改文字信息 取值（）为空
c.val("hello")//修改表单VALUE
</script>
三、操作属性
js操作属性
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa"><a>你好大家</a></span>
<div class="bb"><p>大家好</p></div>
<input type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = document.getElementById("aa");
var b = document.getElementsByClassName("bb");
var c = document.getElementsByName("cc");
a.setAttribute("","")//设置属性
a.removeAttribute("")//移出属性
a.getAttribute("")//获取属性
</script>
jquery操作属性
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa"><a>你好大家</a></span>
<div class="bb"><p>大家好</p></div>
<input type="checkbox" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = $("#aa");
var b = $(".bb");
var c = $("[name='cc']");
a.attr("","")//设置属性
a.removeAttr("aa")//移出属性
a.attr("aa")//获取属性
c.prop("checked",true)//true是选中，false是不选中
</script>
四、操作样式
js操作样式：只操作内联样式
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa" style="background-color:#0FF; width:20px; height:30px;"><a>你好大家</a></span>
<div class="bb"><p>大家好</p></div>
<input type="button" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = document.getElementById("aa");
var b = document.getElementsByClassName("bb");
var c = document.getElementsByName("cc");
a.style.backgroundColor = "red"//修改背景色
</script>
jQuery操作样式：可以操作内嵌样式
<body>
<div>
<a id="dd"></a>
</div>
<span id="aa"><a>你好大家</a></span>
<div class="bb" ><p>大家好</p></div>
<input type="checkbox" name="cc" value="ff"/>
</body>
<script type="text/javascript">
var a = $("#aa");
var b = $(".bb");
var c = $("[name='cc']");
a.css("","")//设置css样式
a.css("width")//获取css样式
b.eq(0).addClass("")//增加class数组中索引为0的样式
b.addClass("")//增加样式
a.removeClass("")//移出样式
</script>
浙公网安备 33010602011771号