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大大减小的代码量，方便使用，直接省略了很大一部分浏览器兼容性，非常好用。
