口号：Write Less Do More
1.解决了浏览器兼容性问题
2.封装了常用的操作，用更少的代码做更多的事。
引入jQuery
1.使用自己项目中的jquery.min.js。
2.使用CDN服务器上的jQuery文件。
如何使用jQuery
jQuery对象的本质是一个伪数组
有length属性
可以通过下标获取数据
window.jQuery属性 --> $
1、$函数的参数是一个函数 - 传入的函数是页面加载完成之后要执行的回调函数
2、$函数的参数是选择器字符串 - 获得页面上的标签而且转换成JQuery对象。
说明：为什么要获取jQuery对象 - 因为jQuery对象有更多封装好的方法可供调用。
绑定/反绑定：on()/off()/one()
获取/修改标签内容：text()/html()
获取/修改标签属性：attr(name, value)
添加子节点：append()后 / prepend()前面
删除/清空节点：remove() / empty()
修改样式表：css({'color':'red',……}) - 修改多个样式 （一个参数是读样式，两个是修改样式）
获取节点：parent() / children() / prev() /next()
后两个是兄弟节点
3、$函数的参数是标签字符串 - 创建标签并且返回对应的jQuery对象。
4、$函数的参数是原生JS对象 - 将原生JS对象转换成JQuery对象。
如果bar是一个jQuery对象 可以通过bar[0] / bar.get[0]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 20px 50px;
}
#fruits li {
list-style: none;
width: 200px;
height: 50px;
font-size: 20px;
line-height: 50px;
background-color: cadetblue;
color: white;
text-align: center;
margin: 2px 0;
}
#fruits>li>a {
float: right;
text-decoration: none;
color: white;
position: relative;
right: 5px;
}
#fruits~input {
border: none;
outline: none;
font-size: 18px;
}
#fruits~input[type=text] {
border-bottom: 1px solid darkgray;
width: 200px;
height: 50px;
text-align: center;
}
#fruits~input[type=button] {
width: 80px;
height: 30px;
background-color: coral;
color: white;
vertical-align: bottom;
cursor: pointer;
}
</style>
</head>
<body>
<!-- <a href="mailto:957658@qq.com">联系站长</a> -->
<div id="container">
<ul id="fruits">
<!-- a标签有默认的跳转页面的行为有两种方法可以阻止它的默认行为-->
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input id="name" type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<!-- 导入外部jQuerY文件 -->
<script src="js/jquery.min.js"></script>
<script>
function removeItem(evt){
evt.preventDefault();
// $函数的第四种用法：参数是原生JavaScript对象
// 将原生JS对象包装成对应的jQuery对象
$(evt.target).parent().remove();
}
// $函数的第一种语法：$函数的参数是另一个函数
// 传入的函数是页面加载完成之后要执行的回调函数
$(function(){
// $函数的第二种用法:参数是一个选择器字符串
// 获取元素并得到与之对应的jQuery对象（伪数组）
$('#fruits a').on('click',removeItem);
$('#ok').on('click',function(){
var fruitName = $('#name').val().trim();
if(fruitName.length > 0){
$('#fruits').append(
// $函数的第三种用法:参数是一个标签字符串
// 创建新元素并得到与其对应的jQuery对象
$('<li>').text(fruitName).append(
$('<a>').attr('href','').text('×').on('click',removeItem)
)
);
}
// jQuery对象使用下标运算或调用get()方法
$('#name').val('').get(0).focus();
});
});
</script>
</body>
</html>
网友评论