$()函数的常用场景
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>$()函数的常用场景</title>
</head>
<body>
<p class="name">张三,李四</p>
<script src="../jquery.js"></script>
<script>
//选择元素 $开头
$('p')[0].innerHTML='你好呀';
// $('.name')[0].style.color='red';
//get() 将获取到的jquery对象集合中的dom元素取出来,jquery转为dom
$('.name').get(0).style.color='red';
//创建元素
$('<ul class="list"></ul>').appendTo('body');
$('.list').append($('<li>不知道该说什么了啊?</li>'));
$('.list').append($('<li id="whatever">随便你说呀</li>'));
$('.list').append($('<li>',{
class:'name',
text:'我就不说',
click:function () {
alert('打***你');
}
}));
//执行回调
//each() 遍历jquery对象集合 css()就是设置标签中的style属性
$('li').each(
function(){
// this.style.backgroundColor = 'grey';
$(this).css('background-color','yellow');//jquery写法
}
);
$('li')[1].setAttribute('style','color:red');
//index()返回当前元素所在的位置
console.log($('p.name').index());
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.jQuery常用的选择器
实例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>jQuery常用的选择器</title>
<script src="../jquery.js"></script>
<style>
.highlight{
background-color: red;
}
#title{
color:gold;
}
</style>
</head>
<body>
<ul>
<li>
<h3 id="title">jQuery</h3>
</li>
<ul>
<li>css</li>
<li>
<h3>javascript</h3>
<ul>
<li>php</li>
<li>C++</li>
</ul>
</li>
<li>jquery</li>
</ul>
</ul>
邮箱: <input type="text"><br>
密码: <input type="password" name=""><br>
<input type="radio" name="grnder" value="male">男
<input type="radio" name="grnder" value="female">女<br>
<input type="checkbox" name="hobby[]" value="dance" checked>跳舞
<input type="checkbox" name="hobby[]" value="sing" checked>唱歌<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>
</body>
<script>
//通用选择器
// $('*').addClass('highlight');
//标签选择器
$('li').addClass('highlight');
//类选择器
$('.highlight').css('color','blue');
//id选择器
$('#title').addClass('course');
//层级选择器
$('li:first h3').addClass('highlight');//选择li属于其父级元素的第一个的li下的 h3
$('li:first>h3').addClass('highlight');//选择li属于其父级元素的第一个的li下的直接子元素h3
//+ 选择相邻兄弟 ~ 选择相邻所有兄弟元素
$("li:contains('css'):last").addClass('highlight');
$("li:contains('css'):last + li").addClass('highlight');//只选1个
$("li:contains('css'):last ~ li").addClass('highlight');
// 选择文本框
$('input[type="text"]').addClass('highlight'); // 属性选择器
$(':input').not(':submit').not(':disabled').addClass('highlight');
console.log($(':checkbox:checked').val()); // 当前选中的值
console.log($(':checkbox').not(':checked').val()); //未被选中的值
console.log($(':checkbox').val()); //默认返回被选中的值
console.log($(':input :selected').val()); // 注意过滤器之间必须要加空格,类:input并不针对select
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.常用的DOM操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的DOM操作</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script src="../jquery.js"></script>
<script>
//插入与替换:
// [1]append()和appendTo(): 将当前元素添加到父元素内部的尾部
//1.$(父元素).append(当前元素);
$('ul').append('<li>新元素1</li>');
//2.$(当前元素).appendTo(父元素);
$('<li>新元素2</li>').appendTo('ul');
// [2].prepend()和prependTo(): 将节点添加到父元素内部的头部
//1.$(父元素).prepend(当前元素);
$('ul').prepend('<li>新元素3</li>');
//2.$(当前元素).prependTo(父元素);
$('<li>新元素4</li>').prependTo('ul');
// [3].after()和insertAfter():将元素插入到当前节点的后面
//1.$(前).after(后);
$('li:eq(2)').after('<li>新元素5</li>');
//2.$(后).insertAfter(前)
$('<li>新元素6</li>').insertAfter('li:eq(4)');
// [4].before()和insertBefore():将元素插入到当前节点的前面
//1.$(后).before(前);
$('<li>新元素7</li>').insertBefore('li:eq(4)');
//2.$(前).insertBefore(后)
$('li:eq(4)').after('<li>新元素8</li>');
//[5].replaceWith()和replaceAll():替换掉匹配的html内容
//1. $(原).replaceWith(新);
$('li:contains("新元素")').replaceWith('<li style="color:red">新元素</li>');
//2. $(新).replaceAll(原);
$('<li style="color:lightgreen">新元素</li>').replaceAll('li:contains("新元素")');
// (2).empty():删除匹配到的元素集合中所有的子节点
// (3).remove(可用selector):删除匹配的元素
//替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素
//删除
// $('li').remove(); // 不传参数是全部删除
// $('li').remove(':odd'); // 删除奇数(从0开始)
// $('ul').empty(); // 等价于 $('li').remove();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.jQuery与原生javascript相比，有哪些优势，哪些劣势。
优点:jquery语法简单,DOM操作更加的简单
缺点:需要调用jquery库类,兼容性较差
