jQuery之DOM操作
主要知识点
1）jQueyr中的属性操作
2）jQuery中的css操作
3）jQuery中常用的选择器
jQuery与原生javascript相比，有哪些优势，哪些劣势
JavaScript:
优：
性能：由于JavaScript运行在***端，节省了web服务器的请求时间和带宽。
运行在用户机器上，运行结果和处理相对比较快，运行效率大大提高
可以使用第三方附加组件来检查代码片段。
缺：
安全问题:由于JavaScript在***端运行,可能被用于黑客目的。
渲染问题:在不同浏览器中的处理结果可能不同。也就是兼容性较差。
jQuery:
优：
扩展能力好,抽象层次高,开发效率高,不需要太多经验也可以上手
代码兼容性较好,消除了JavaScript跨平台兼容问题。
相比其他JavaScript和JavaScript库,jQuery更容易使用。
jQuery支持AJAX。
缺：
jquery是一个特化的框架，它不是一个完整的解决方案，仍然离不开javascript。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库,可能会发生冲突。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>0917</title>
</head>
<body>
<h2>12345</h2>
<!-- <ul>
<li>$()函数的常用场景:选择元素,创建元素，执行回调等。</li>
<li>jQuery常用的选择器操作,重点在层级和表单上</li>
<li>常用的DOM操作有哪些?一定要结合实例完成</li>
</ul> -->
<!--
JavaScript:
优：
性能：由于JavaScript运行在***端，节省了web服务器的请求时间和带宽。
运行在用户机器上，运行结果和处理相对比较快，运行效率大大提高
可以使用第三方附加组件来检查代码片段。
缺：
安全问题:由于JavaScript在***端运行,可能被用于黑客目的。
渲染问题:在不同浏览器中的处理结果可能不同。也就是兼容性较差。
jQuery:
优：
扩展能力好,抽象层次高,开发效率高,不需要太多经验也可以上手
代码兼容性较好,消除了JavaScript跨平台兼容问题。
相比其他JavaScript和JavaScript库,jQuery更容易使用。
jQuery支持AJAX。
缺：
jquery是一个特化的框架，它不是一个完整的解决方案，仍然离不开javascript。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库,可能会发生冲突。
-->
<ul>
<li>
<h4>12</h4>
</li>
<li id="lis">45</li>
<li>78</li>
<li>69</li>
<li name='h4li'>
<div><h4>ccc</h4></div>
<ul>
<li>aa</li>
<li>bb</li>
</ul>
</li>
<li>emmm</li>
</ul>
<div>
<input type="text">
<!--input:radio-->
<input type="radio" name="isTrue" data-id='0' value="yes" onclick="func(this)">是
<input type="radio" name="isTrue" value="no">否
<input type="radio" name="isTrue" value="none">无
<hr>
<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby" value="basket" checked>篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="swim">游泳
<br>
你的学历:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
</div>
</body>
<script src="./lib/jquery.js"></script>
<script>
// 选择元素
console.log($('li'))
console.log($('.uls'));
console.log($('#lis'));
// 创建元素
$('#lis').append('<ul id="ulss"></ul>');
$('#lis').append($('<button>').text('btn'));
$('#ulss').append('<li>ulss</li>');
$('#ulss').append('<li>ulss</li>');
$('#ulss').append($('<li>').text('ulss545'));
console.log($('<li>').text('ulss545'));
// 执行回调
$('li').each(function(){
$(this).css('background','red')
});
// 层级选择器:空格, >直接子元素, +相邻兄弟, ~ 所有兄弟
$('li h4').css({'margin':'0','color':'#fff'})
$('li>h4').css({'margin':'0','background':'blue'})
$('li:first h4').css({'margin':'0','background':'yellow'})
$('li:first + li').css({'margin':'0','background':'#eee'})
$('li:first + li ~ li').css({'margin':'0','background':'#ccc'})
// 表单
$('input[type="text"]').val('我是文本');
console.log($(':radio:checked').val());
console.log($(':checkbox:checked').val()); // 当前选中的值
var ii = $('input[type="checkbox"]').not(':checked').css('background','#ccc').length
console.log($(':checkbox').not(':checked').length,ii); //未被选中的值
console.log($(':checkbox').val()); //默认返回被选中的值
console.log($(':input :selected').val());
// append()和appendTo()
$('.uls').append('<li id="new1">new one</li>');
$('<li>new two</li>').appendTo('.uls');
// prepend()和prependTo()
$('.uls').prepend('<li>new 3</li>')
$('<li>new 4</li>').prependTo('.uls');
// after()和insertAfter()
$('#new1').after($('<li>后面1</li>').css('color','blue'));
$($('<li>后面2</li>').css('color','blue')).insertAfter('#new1');
// before()和insertBefore()
$('.uls>li').eq(1).before('<li>前面1</li>');
$('<li>前面2</li>').insertBefore('.uls>li:eq(0)');
// replaceWith()和 replaceAll()
$('.uls').replaceWith($('<p id="pnew">replaceWith</p>'));
$('<p>replaceAll</p>').replaceAll($('#pnew'));
// empty()
$('li[name="h4li"]').empty().text('删除所有子类然后新增我');
// remove()
$('div').remove()
</script>
</html>