收藏
批改状态：合格
老师批语：
juqery对dom元素的操作，选择器、更改属性、创建元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<title>js</title>
</head>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="l5" value=123>5</li>
</ul>
</div>
<a href="#">121231231312313</a>
<button id = "click">删除属性</button>
<button id = "click2">属性2</button>
<style>
.c1{height:30px;width:200px;background:lightgrey}
</style>
<body>
<script>
$('li')[3].textContent ="1211111111111"//转化为dom对象
$(function(){
//元素内部添加
$('ul').append('<li>常用添加到尾部</li>'); // 添加到尾部
$('ul').prepend('<li>常用的添加加到头部</li>'); // 添加到头部
//元素前后添加
$('li:eq(2)').after('<li>元素后添加</li>'); // 元素后添加
$('li:eq(2)').before('<li>元素前添加</li>'); // 元素后添加
//元素替换
$('li:contains("4")').replaceWith('<li style="color:red">替换后新元素</li>');
//元素删除
$('a').remove()
})
//选择元素$()
// (1).css():获取与设置元素的style属性,支持字符串和对象字面量与回调
// (2).快捷方法:width(),height(),innerWidth()/inerHeight()/outerHeight()/outWidth()
// $('li').width(200).css('color','red').css({
// width: '200px',
//height: '200px',
// backgroundColor: 'coral' //必须使用js驼峰语法
// });
//添加属性
$('li').attr('name','user')
//获取属性
console.log($('li:first').attr('name'))
//删除属性
$('li').removeAttr('name')
//添加class,删除class
$('li').addClass('c1')
$('#click').click(function(){
$('li').removeClass('c1')
});
$('#click2').click(function(){
$('li:eq(3)').toggleClass('c1')
});
//改变内容属性
$('li:last-child').html("中华人民共和国")
//alert($('li').eq(4).html())
$('.l5').text('万岁')
// alert($('.l5').val())
$('li:first-child').val(121231312313);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
回调函数each(function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<title>js</title>
</head>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<button id = "click">改变li内容</button>
<body>
<script>
//each回调处理每一个Li
$('#click').click(function(){
$('li').each(function(){
$(this).text("xx+xx")
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.jquery相比于原生js，感觉除了多引用了一个js文件和需要多记一些功能方法，没有什么劣势。
jquery大大减小的代码量，方便使用，直接省略了很大一部分浏览器兼容性，非常好用。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
