一、jQuery
js原生代码编程
jquery 代码 编程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>day9添加、链接jQuery</title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
</style>
</head>
<body>
<a href="">原生代码编译页面</a>
<table id="data">
<caption>数据统计表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td><a>Item3</a></td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td><a>Item5</a></td>
</tr>
</table>
<div id="buttons">
<button id="pretty">美化表格</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
</div>
==========================================================
<!--1、适合本地使用，开发，试验使用-->
<script src="js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
<!--2、适用商业项目，通过CDN服务器来加速获取jQuery的js文件-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<script type="text/javascript">
$(function(){
//根据样式表选择器获取元素，获取到的不是原生的JS对象
//而是经过jQuery封装后的对象，（此对象有更多的方法方便操作）
$('#pretty').on('click',function(){
$('#data tr:gt(0):odd').css('background-color','#ccc')
$('#data tr:gt(0):even').css('background-color','#abc')
})
$('#clear').on('click',function(){
$('#data tr:gt(0)>td' ).text('')
})
$('#remove').on('click',function(){
$('#data tr:gt(0):last-child').remove()
})
$('#hide').on('click',function(){
$('#data').css('visibility','hidden')
})
})
</script>
</body>
</html>
二、jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day9增删标签-jQuery</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>
<div id="container">
<ul id="fruits">
<li>苹果<a href="javascript:void(0)">×</a></li>
<li>香蕉<a href="javascript:void(0)">×</a></li>
<li>火龙果<a href="javascript:void(0)">×</a></li>
<li>西瓜<a href="javascript:void(0)">×</a></li>
<!--a标签有默认的跳转页面的行为，有两种方法可以阻止其行为；-->
<!--1、让a标签的href="javascript:void(0)"-->
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script src="js/jQuery.min.js">
</script>
<script type="text/javascript">
function removeItem(evt){
//evt.preventDefault()
//$函数的第四种方法:参数是原生的js对象,将原生的js对象包装成对应的jQuery对象
$(evt.target).parent().remove()
}
//$函数的第一种用法:$函数的参数是另一个函数,传入的函数是页面加载完成后要执行的回调函数;
$(function(){
//$函数的第二种用法:$函数的参数是一个(标签,Id,类)选择器字符串,获取元素并得到与之对应的jQuery对象(伪数组)
//删除标签
$('#fruits a').on('click',removeItem)
//添加标签，并向标签里添加内容
$('#container #ok').on('click',function(){
var fruitName=$('#container input[type=text]').val().trim()
if (fruitName.length>0){
$('#fruits').append(
//$函数第三种用法:$函数的参数是一个标签字符串,创建相应新元素并得到与之对应的jQuery对象(伪数组)
$('<li>').text(fruitName).append(
$('<a>').attr('href','javascript:void(0)').text('×').on('click',removeItem)
)
)
}
//jQuery通过下标运算[index]或调用get(index)方法,会得到原生js对象
$('#container input[type=text]').val('').get(0).focus()
})
})
</script>
</body>
</html>
jQuery用法详解
http://www.runoob.com/jquery/jquery-tutorial.html
网友评论