Collection
Collection
1、 编程:$()函数的常用场景:选择元素,创建元素，执行回调等。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<script>
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li>C</li>'));
$('.list').append($('<li id="Java">Java</li>'));
$('.list').append($('<li>PHP</li>'));
$(function(){
$('#Java').css('background-color','cyan');
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、编程:jQuery常用的选择器操作,重点在层级和表单上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Selector</title>
<Script src="lib/jquery.js"></Script>
<style>
.hightlght{
background-color: yellow;
}
#title{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<h3 id="title">Class</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScript</h3>
<ul>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
E-mail: <input type="text"><br>
Password: <input type="password"><br>
<input type="radio" name="gender" value="male" checked>male <br>
<input type="radio" name="gender" value="female">female <br>
<input type="checkbox" name="hobby[]" value="dancing" checked>Dancing <br>
<input type="checkbox" name="hobby[]" value="Singing">Singing <br>
School:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">Middle School</option>
<option value="">Others</option>
</select>
<br>
<button type="submit">Submit</button>
<button type="reset" disabled>reset</button>
<script>
//$('*').addClass('hightlght');
//$('li').addClass('hightlght');
//$('.hightlght').css('color','red');
//$('#title').addClass('hightlght');
//层级选择器
//$('li:first').addClass('hightlght');
$('li:first >h3').addClass('hightlght');
//内容过滤
//$('li:contains("HTML"):last').addClass('hightlght');
// $('li:contains("HTML"):last +li').addClass('hightlght');
// $('li:contains("HTML"):last ~li').addClass('hightlght');
$('input[type="text"]').addClass('hightlght');
$(':input').not('submit').not('disabled').addClass('hightlght');
console.log($(':checkbox:checked').val());
console.log($(':input :selected').val());
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、编程:常用的DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery DOM</title>
<Script src="lib/jquery.js"></Script>
</head>
<body>
<ul>
<li>c</li>
<li>php</li>
<li>Java</li>
<li>C++</li>
<li>C#</li>
</ul>
<script>
$('ul').append('<li>newTail1</li>');
$('<li>newTail2</li>').appendTo('ul');
$('ul').prepend('<li>newHead1</li>');
$('<li>newHead2</li>').prependTo('ul');
//after
$('li:eq(2)').after('<li>newAfter1</li>');
$('<li>newAfter2</li>').insertAfter($('li:eq(2)'));
//replace
$('li:contains("new")').replaceWith('<li style="color:red">replaced</li>');
//remove
$('li').remove(':odd');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、问答: jQuery与原生javascript相比，有哪些优势，哪些劣势？
jQuery的优点和缺点：
使用jQuery最大的好处是少量的代码做更多的事情。与JavaScript相比，jQuery的语法更加简单。通过jQuery，可以很容易地浏览文档、选择元素、处理事件以及添加效果等，同时还允许开发者定制插件。
(1)优点：
jQuery消除了JavaScript跨平台兼容问题。
相比其他JavaScript和JavaScript库，jQuery更容易使用。
jQuery有一个庞大的库/函数。
jQuery有良好的文档和帮助手册。
jQuery支持AJAX。
(2)缺点：
由于不是原生JavaScript语言，理解起来可能会受到限制。
项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。