jqury的操作属性作业
总结 ：学了这课 我知道了一些写法 ，只是还有一部分的不会结合运用
操作属性一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .red{color: pink}
.oks{font-weight: bold;font-size: 35px;} */
#web{font-weight: bold;font-size: 35px;}
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// jQuery的操作属性其原理还是对于DOM的操作
// 通过对象的关系，对节点树中的元素的属性进行操作的方法有以下：
// addClass() 该方法向被选中的元素添加一个或者多个类
// removeClass() 该方法从被选中的元素移除一个或者多个类
// attr() 该方法设置或者返回被选中元素的属性值
// removeAttr() 该方法从被选中的元素中移除属性
// hasClass() 该方法检查被选中的元素是否包含指定class
// toggleClass()该方法对被选中元素进行添加/删除类的切换操作
// 设置内容：
// text() 该方法返回或者设置被选中的元素的文本内容
//html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）
// val() 该方法返回或者设置被选元素的值
$(document).ready(function(){
$('p').addClass('red oks') //给p标签增加red 和oks的css属性、 可以多增加
$('p').removeClass('oks') //给p标签移除oks的css属性 可以多个移除
// alert($('p').attr('id','')) //p标签下的ID等于的值 列如 id=web 那么久等于web
// ($('p').attr('id','修改')) //也可以修改id下的
$('button').click(function(){ //删除按钮被点击执行 img下移除src属性
$('img').removeAttr('src')
//removeAttr 点击按钮 执行img里面的src被移除
alert($('div').hasClass('ord')) //div下clss下右ord这个元素
})
})
})
</script>
<p id="wed">我是Risco</p>
<img src="image/2.png">
<button>删除</button>
<div>我是php中文网</div>
<button class="">点击</button>
</body>
</html>
操作属性二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .red{color: pink}
.oks{font-weight: bold;font-size: 35px;} */
.web{font-weight: bold;font-size: 35px;color: pink;}
.v{color: red;}
</style>
<script type="text/javascript"src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// jQuery的操作属性其原理还是对于DOM的操作
// 通过对象的关系，对节点树中的元素的属性进行操作的方法有以下：
// addClass() 该方法向被选中的元素添加一个或者多个类
// removeClass() 该方法从被选中的元素移除一个或者多个类
// attr() 该方法设置或者返回被选中元素的属性值
// removeAttr() 该方法从被选中的元素中移除属性
// hasClass() 该方法检查被选中的元素是否包含指定class
// toggleClass()该方法对被选中元素进行添加/删除类的切换操作
// 设置内容：
// text() 该方法返回或者设置被选中的元素的文本内容
//html() 该方法返回或者设置被选中的元素的内容（类似innerHTML 可以包括html标签）
// val() 该方法返回或者设置被选元素的值
$(document).ready(function(){
$('button').click(function(){
$('p,h1,h2,h3,i').toggleClass('web') //点击按钮 获取标签 在给css的值 增加元素或者 删除操作
})
$('p').text('我师傅是灭绝师太') //返回货设置选中文本内柔 删除和增加内柔
// $('h1').html('<span>vo</span>') //返回或者设置被选中的内容
$('input').val('v') //改变值
})
</script>
<p>我的事件</p>
<h1>我的快乐</h1>
<h2>我的玩具</h2>
<h3>我的师傅是师太</h3>
<i>holo word</i>
<button>点击</button>
<input type="" name="" value="我的师傅是师太">
</body>
</html>
