jQuery替代JavaScript的DOM对象操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script> <!--安装JQ插件-->
</head>
<body>
<div id="asd" class"1"></div>
<div class="a"></div>
<div></div>
<input type="text" id="zxc" value="aaa">
<div class="zxc">收齐1</div>
<div class="zxc">收齐2</div>
<div class="zxc">收齐3</div>
<div class="zxc">收齐4</div>
<div class="zxc">收齐5</div>
<div class="zxc">收齐6</div>
<div class="zxc">收齐7</div>
<div class="zxc">收齐8</div>
<input onClick="aaa()" type="button" value="aaa">
<input onClick="vvv()" type="button" value="vvv">
<input onClick="ccc()" type="button" value="ccc">
</body>
<script>
$("#A") /*id选择器*/
$(".a") /*class选择器*/
$("div") /*标签选择器*/
$("[属性名='属性值']")
$("input:checkbox[name='qwer']:checked")
$("#asd").html(); /*获取全部内容*/
$("#asd").html("asd"); /*改变全部内容*/
$("#asd").text(); /*获取文本内容*/
$("#asd").text("asd"); /*改变文本内容*/
$("#zxc").val(); /*获取value值*/
$("#zxc").val("123"); /*改变value值*/
$("#asd").attr("bs","123");/*增加更改属性的值*/
$("#asd").attr("class");/*获取属性的值*/
$("#asd").removeAttr("class");/*删除属性的值*/
$("#asd").css("width"); /*获取样式*/
$("#asd").css("width","800px"); /*改变样式 */
$("#asd").css("background-color","red"); /*书写方式和CSS一样*/
$(".zxc").html("123"); /*全部赋值和改样式*/
$(".zxc").css("display","none");
var a = $(".zxc"); /*给第一个赋值*/
var b = a.eq(0).html("123");
$("#asd").hide(); /*隐藏*/
$("#asd").show(); /*显示*/
/*部分动画效果*/
function aaa(){
$("#asd").fadeOut(2000); /*淡出*/
}
function vvv(){
$("#asd").fadeIn(2000); /*淡入*/
}
function ccc(){
$("#asd").fadeToggle(2000); /*淡入淡出 一个按钮控制*/
}
function aaa(){
$("#asd").fadeTo(2000,0.4); /*到多少透明度停止*/
}
function aaa(){
$("#asd").slideDown(); /*下滑*/
}
function vvv(){
$("#asd").slideUp(); /*上滑*/
}
function ccc(){
$("#asd").slideToggle(); /*一个按钮控制滑动*/
}
function aaa(){
$("#asd").animate({ /*变形动画*/
"width":'250px',
"height":'100px',
"opacity":'0.3',
"margin-left": "300px"
});
}
</script>
</html>
