实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/jquery.js"></script>
</head>
<body>
<script>
$('<ul class="list"></ul>').appendTo('body').append($('<li>hello</li>'));
//回调函数循环创建li
$(function () {
for(i=1;i<=10;i++)
{
$('.list').append($('<li>列表'+i+'</li>'));
}
});
$(function () {
$('li').css('background-color','yellow');
});
console.log($().length);
$('li').get(0).style.color = 'red';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../lib/jquery.js"></script>
<ul class="list">
<li class="item">列表项1</li>
<li class="item">列表项2</li>
<li class="item">列表项3</li>
</ul>
<script>
$('li:first-child').attr('id','first');//设置新属性
$('li:eq(0)').removeAttr('id');//移除属性
//操作class
$('<style></style>').appendTo('head').text('.red {color:red}');//创建临时样式
$('li:first-child').addClass('red');//添加样式
</script>
<body>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.highlight{
background-color: #2aabd2;
}
</style>
</head>
<script src="../lib/jquery.js"></script>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>
<h3>JavaScrip</h3>
<ul>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<!--input:radio-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby[]" value="dance"checked>跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<br>
你的学历:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<script>
// $('*').addClass('highlight');
// $('li').addClass('highlight');
// $('.highlight').css('color','yellow');
//层级选择器
// $('li:first h3').addClass('highlight');
// $('li:first > h3').addClass('highlight');
// $("li:contains('HTML'):last").addClass('highlight');
// $("li:contains('HTML'):last + li").addClass('highlight'); //相依兄弟
// $("li:contains('HTML'):last ~ li").addClass('highlight'); // 相邻所有兄弟
// $('input[type="text"]').addClass('highlight');
// $(':input').not(':reset').addClass('highlight');
// console.log($(':checkbox').not(':checked').val());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/jquery.js"></script>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script>
// 添加到尾部
$('ul').append('<li>新元素1</li>');
$('<li>新元素2</li>').appendTo('ul');
// 添加到头部
$('ul').prepend('<li>新元素4</li>');
$('<li>新元素3</li>').prependTo('ul');
//将元素插入到当前节点的后面
$('<li>新元素4</li>').insertAfter('li:eq(3)');
$('li:eq(4)').after('<li>新元素6</li>');
//将元素插入到当前节点的前面
$('<li>新4</li>').insertBefore('li:eq(1)');
$('li:eq(2)').before('<li>新6</li>');
$('li:contains("新元素")').replaceWith('<li style="color: #00CC66 ">新元素</li>')
$('li:contains("列表项05")').remove();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
jquery的优点：
代码简洁
消除了兼容性问题
内置函数多
DOM操作更加简单
在***端运行节省带宽响应快
缺点：
在***端运行安全性比较低
