一、设置样式
<div>设置样式</div>
<script type="text/javascript">//设置一条样式$('div').css('background-color','red');//设置多条样式使用类名的方式
</script><div>设置样式
</div>
<script type="text/javascript">//jq中对类名的操作// $("div").prop("class",'d2');//jq中对类名有特殊操作，不要当做普通预定义属性使用//添加类名$('div').addClass('d1');$('div').addClass('d2');//删除类名$('div').removeClass('d1');//判断是否存在类名console.log($('div').hasClass('d1'))//falseconsole.log($('div').hasClass('d2'))//ture
</script>二、添加元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery/jquery-1.11.3.js"></script><style>.out{width: 100px;height: 100px;background-color: #0a53be;}</style>
</head>
<body>
<div class="out"><span class="target">标识</span>
</div>
<button>添加成最后一个子元素</button>
<button>添加成第一个子元素</button>
<button>添加到指定元素之前</button>
<button>添加到指定元素之后</button>
<script type="text/javascript">//创建元素$span = $(`<span>我是创建的span</span>`);//添加元素//添加成最后一个子元素$('button:first').click(function () {$span = $(`<span>我是创建的span</span>`);//添加$('.out').append($span);})//添加成第一个子元素$('button:eq(1)').click(function () {$span = $(`<span>我是创建的span</span>`);//添加$('.out').prepend($span);})//添加到指定元素之前$('button:eq(2)').click(function () {$span = $(`<span>我是创建的span</span>`);//添加$('.target').before($span);})//添加到指定元素之后$('button:eq(2)').click(function () {$span = $(`<span>我是创建的span</span>`);//添加$('.target').after($span);})
</script>
</body>
</html>三、复制
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>复制</title>
</head>
<body>
<div>点击复制</div>
<script type="text/javascript">$("div").click(function () {//复制// $div=$(this).clone();$div=$(this).clone(true);//添加$("body").append($div);})//clone的参数是布尔值// 默认值false不复制元素的功能//可选值true复制元素的功能</script>
</body>
</html>四、替换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>替换</title><script src="jquery/jquery-1.11.3.js"></script>
</head>
<body>
<button>替换1</button>
<button>替换2</button>
<div>被替换的元素</div>
<div class="dd">已存在的元素</div>
<script type="text/javascript">//被替换元素.replaceWith(替换元素)//被替换元素会消失//替换元素,可以是页面上已经存在的，也可以是创建出来的//用页面上已存在的元素替换//已存在的元素会从原位置消失，出现在被替换元素的位置$("button").click(function () {$("div:first").replaceWith($(".dd"))})//用创建出来的元素替换$("button:last").click(function () {$div= $("<div>新创建的元素</div>")$("div:first").replaceWith($div)})
</script>
</body>
</html>五、删除
1.删除指定元素，自己删自己
元素.remove()
2.删除所有子元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>删除</title><script src="jquery/jquery-1.11.3.js"></script>
</head>
<body>
<ul><li>1</li><li class="ll">2</li><li>3</li><li>4</li><li>5</li>
</ul>
<button>删除1</button>
<button>删除2</button>
<script type="text/javascript">//删除指定元素$('button:first').click(function () {// $('.ll').remove()$('li').remove('.ll')})//删除所有子元素$('button:last').click(function () {// $('ul').empty()//清空子元素，ul存在，所有li销毁$('ul').html('')})
</script>
</body>
</html>六、jq中绑定事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jq中绑定事件</title><script src="jquery/jquery-1.11.3.js"></script>
</head>
<body>
<button>点我</button>
<script type="text/javascript">$("button").click(function () {alert("123");})$("button").click(function () {alert("456");})//jq中绑定事件的方式是 addEventListenerfunction fn(){alert("789")}$("button").click(fn)$("button").off("click",fn)
</script>
</body>
</html>七、jq对类数组的操作
jq中获取元素就会得到类数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jq中类数组</title><script src="jquery/jquery-1.11.3.js"></script>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
<script type="text/javascript">console.log($('li'))//类数组，自动遍历，jq元素console.log($('li').length)//4//获取指定元素console.log($('li').eq(2))//jq元素,可以调用jq方法console.log($('li')[2])//js元素,不能调用jq方法//遍历数组/类数组$('li').each(function(index,item){//默认参数1，下标console.log(index)//默认参数2，数组/类数组中的元素console.log(item) })
</script>
</body>
</html>八、jq的基础动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><script src="jquery/jquery-1.11.3.js"></script><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body>
<button>隐藏</button>
<button>显示</button>
<button>切换</button>
<div></div>
<script type="text/javascript">//动画参数是动画的执行时间//hide宽高缩小成0//show宽高恢复//toggle hide/show切换//slideUp 高缩小成0//slidDown 高恢复//slideToggle slideUp/slidDown切换//fadeOut 透明度变成0//fadeIn 透明度恢复//fadeToggle fadeOut/fadeIn切换$("button").eq(0).click(function () {// $("div").hide(1000);// $("div").slideUp(1000);$("div").fadeOut(1000);})$("button").eq(1).click(function () {// $("div").show(1000);// $("div").slideDown(1000);$("div").fadeIn(1000);})$("button").eq(2).click(function () {// $("div").toggle(1000);// $("div").slideToggle(1000);$("div").fadeToggle(1000);})
</script>
</body>
</html>
