1. 元素操作
1.1 text
//text() :获取匹配到的标签中的所有文本文字
// text(val) :更改文本文本
console.log($('div:eq(0)').text());
$('div:eq(0)').text('天气真好')
// 注：text中的标签不会有效果，当做普通字符
$('div:eq(0)').text('<h1>清空后</h1>');
1.2 html
//html() ：获取匹配到的第一个标签中的所有html内容
// html(val)：修改匹配到的所有标签中的所有html内容
$('div').html('大雨')
// 注：html中标签会被正确解析
$('div').html('<h1>海棠</h1>')
1.3 val
// val() :获取值
// val(str)： 修改value的值
$('#iunput1').val('简单');
1.4 class
// 添加class属性 addClass('str')
// 移除class属性 removeClass('str')
// 添加或删除class属性 toggleClass('str')
//如果原本有 执行删除，原本没有执行添加
$('#d1').addClass('div1');
$('#d2').removeClass('div3');
$('#d1').toggleClass('div3');
$('#d2').toggleClass('div3');
1.5 css
// css(name):返回匹配到的标签的css样式中name的值
// css(name,value):为匹配到的标签设置一个css样式
// css({name1:value1, name1:value1..}) 多个样式
$('#d1').css('background','beige');
$('#d1').css({'height':'300px', 'width':'100px', 'background':'yellow'})
1.6 attr
attr与addClass的区别：如果class属性存在，attr会替代，而addClass会增加一个class属性 class可以有多个属性值。
//attr(name) : 返回匹配到的标签的属性中name的值
//attr(name, value) 为匹配到的标签添加一个属性
//attr({name1:value1, name1:value1..}) ： 为匹配到的标签添加多个属性值
// 获取input的id属性的值
alert($('#i1').attr('id'));
// 添加type属性
$('#i1').attr('type', 'password');
2. 父子兄弟元素
2.1 获取父元素
// 1、获取当前元素的直接父元素
var $d5 = $('#p1').parent();
// 2、获取当前元素的所有祖先元素
var $parArr = $('#p1').parents();
//3、获取当前元素的所有祖先元素并且这些祖先元素均为指定内容
var $divArr = $('#p1').parents('div');
var $divArr = $('#p1').parents('#d2');
//4、获取当前元素的所有祖先元素 直到元素前，不包含该元素
var $untilArr = $('#p1').parentsUntil('#d2');
2.2 获取子元素
// 1、获取当前元素的直接子元素
var $ch1 = $('#d2').children();
console.log($ch1); // d3 d6
// 2、获取当前元素的直接子元素 并且子元素为符合条件的元素
var $ch2 = $('#d2').children('div#d6');
console.log($ch2); // d6
// 3、获取当前元素的所有后代节点 find('*')
var $allCh = $('#d2').find('*');
console.log($allCh); // d6 d3 d4 d5 p1
// 4、获取当前元素的所有符合条件的后代节点 find('条件')
var $allDiv = $('#d2').find('div');
console.log($allDiv); // d6 d3 d4 d5
2.3 兄弟元素
// 1、获取当前元素的同级元素
var $sibArr = $('h3').siblings();
// 2、获取当前元素的所有同级元素，并且符合条件
var $pArr = $('h3').siblings('p');
// 3 、 next(); 获取当前元素后面的下一个同级元素
var $next = $('h3').next();
console.log($next); // h4
// 4、
var $allNext = $('h3').nextAll();
console.log($allNext); // h4 5 6 p div
// 5、nextUnitl('h6')
var $allNextUn = $('h3').nextUntil('h6');
console.log($allNextUn); // h4 h5
// prev() :向前查找
// prevAll()
2.4 过滤元素
<div id="d1">
<p id="p1" class="p1">1</p>
<p id="p2" class="p2">2</p>
<p id="p3" class="p1">3</p>
<p id="p4" class="p2">4</p>
</div>
<script type="text/javascript">
$(function () {
// 根据指定条件筛选查找
// 1、first()
console.log($('div p').first()); // p1
// 2、 last()
console.log($('div p').last()); // p4
// 3、eq(index)
// 4、filter('条件')
console.log($('div p').filter('.p1')); // p1 p3
// 5、not('条件')
console.log($('div p').not('.p1')); // p2 p4
})
</script>
3. 元素事件
3.1 加载文档
// 文档加载完毕后执行
$(document).ready(function(){
})
$(function(){
})
3.2 事件处理
<body>
<div id="d1">点击</div>
<div id="d2">
<p>春天来了</p>
<p>燕子说</p>
</div>
<script type="text/javascript">
// 1、为标签添加事件 不能移除
$('#d1').click(function(){
//alert('爱来不来');
// 给d2添加一个新的标签
$('#d2').append('<p>新来的</p>');
})
// 动态添加的标签事件不能使用
/*$('div p').click(function(){
// this: 当前p对象
// $(this).text()
alert(this.innerText);
})*/
// 2、bind 绑定事件
// bind('事件执行的方式','事件执行的函数')
// 通过动态添加的标签不能使用
$('div p').bind('click', function(){
alert($(this).text());
})
// 移除事件 unbind
$('div p').unbind('click');
// 3、delegate 代理事件 (动态添加的可用)
// 父标签.delegate(真正的执行者, 执行方式, 执行函数)
//事件代理：利用事件冒泡的方式：将父元素的事件传递给子元素执行
//使用范围：同一父元素下的相同的子元素都要执行相同的操作
// 使用条件：必须是冒泡事件
// click dbclick key mouse
// 建议：DOM层不要太深
$('#d2').delegate('p','click',function(){
alert($(this).text());
})
// 移除 undelegate
$('#d2').undelegate('p', 'click')
// 4、on 添加事件 (动态添加的可用)
// 父标签.delegate(执行方式, 真正执行者, 执行函数)
// bind click delegate都是通过on实现的
//建议：DOM层不要太深
// 如果需要给动态添加的标签添加事件，推荐使用on的方式
$('#d2').on('click','p',function(){
alert($(this).text());
})
// 移除 off
$('#d2').off('click', 'p');
</script>
</body>
3.3 一次性事件
<script type="text/javascript">
$(function () {
$('div').one('click', function(){
alert('我只出现一次')
})
})
</script>
3.4 鼠标移入或移出
<script type="text/javascript">
$(function(){
// hover(inFunc, outFunc)
//当只有一个参数，鼠标进入或离开都会执行
$('div').hover(function(){
console.log('进入')
}, function(){
console.log('离开')
})
})
</script>
3.5 事件对象
<script type="text/javascript">
// e:事件对象
// 事件对象包含事件相关的参数
$('button').click(function(e){
console.log(e);
console.log(e.pageX);
console.log(e.pageY);
})
</script>
3.6 阻止冒泡及默认事件
<body style='height:1000px'>
<div id='d1' style="width: 200px; height: 200px; background: pink;"></div>
<input type="text" id="i1" />
<a href="http://www.baidu.com" id="a1">非法网站</a>、
<script type="text/javascript">
$(function(){
// 点击body范围 body变成绿色
$('body').click(function(){
$(this).css('background','green');
})
})
// 点击div 只有div 变green
$('#d1').click(function(e){
$(this).css('background','green');
// 阻止事件冒泡
e.stopPropagation();
})
// 点击input body 不变green
$('#i1').click(function(e){
e.stopPropagation();
})
// 点击 a body 不变green 弹出提示框 点击取消按钮 不访问
$('#a1').click(function(e){
e.stopPropagation();
var result = confirm('是否要访问')
if(result == false){
// 取消默认事件
// e.preventDefault();
//jQuery 中简写 返回false 相当于执行e.stopPropagation 及e.preventDefault()
return false;
}
})
</script>
</body>
4. 动态操作元素
4.1 创建标签
<script type="text/javascript">
$(function(){
// 1、创建元素
// $('<元素名称></元素名称>')
var $p1 = $('<p></p>')
// 添加到父视图上
$('body').append($p1);
// 2、创建带有文本文字的标签元素
var $p2 = $('<p>6666</p>')
$('body').append($p2);
// 3、创建带有属性的标签元素
var $p3 = $("<p style='color:blue'>7777</p>")
$('body').append($p3);
})
</script>
4.2 添加元素节点1
<script type="text/javascript">
$(function () {
//在元素内部添加新的元素
// 1、append
// 语法结构：父元素.append(新标签)
// 将新元素添加到父元素所有子元素的后面
var $p1 = $('<p>周三</p>')
$('#d1').append($p1);
// 2、appendTo
// 语法结构：父元素.appendTo(新标签)
// 将新元素添加到父元素所有子元素的后面
var $p2 = $('<p>周四</p>')
$p2.appendTo('#d1');
// 3、prepend
// 语法结构：父元素.prepend(新标签)
// 将新元素添加到父元素所有子元素的前面
var $p3 = $('<p>周二</p>')
$('#d1').prepend($p3);
// 4、prependTo
// 语法结构：父元素.prependTo(新标签)
// 将新元素添加到父元素所有子元素的后面
var $p4 = $('<p>周一</p>')
$p4.prependTo('#d1');
})
</script>
4.3 添加元素方式2
<script type="text/javascript">
// 1、after
// 旧元素.after(新元素)
$p1 = $('<p>777</p>')
// console.log($('div'))
// console.log($('div:eq(0)'))
$('div').after($p1);
// 2、insertAfter
// 新元素.insertAfter(旧元素)
$p2 = $('<p>888</p>')
$p2.insertAfter($('div'));
//3 before
// 旧元素.before(新元素)
$p3 = $('<p>666</p>')
$('div').before($p3);
// 4、insertBefore
// 新元素.insertBefore(旧元素)
$p4 = $('<p>555</p>')
$p4.insertBefore($('div'));
</script>
4.4 删除元素
<script type="text/javascript">
$(function(){
// JQuery 删除元素的操作
// 1、remove()
// 2、detach()
// 3、empty()
$('div p').click(function(){
alert($(this).text());
})
})
// 1、remove(): 删除元素
// 删除元素，但是会把删除的元素保持下来，但不会把元素绑定的事件保存下来
/*var $pp = $('div:eq(0) p').remove();
// 添加到div上
$('div:eq(0)').append($pp);*/
// 2、detach(): 删除元素
// 删除元素，但是会把删除的元素保持下来，会把元素绑定的事件保存下来
var $p3 = $('div p').detach();
// 添加到div上
$('div:eq(0)').append($p3);
// 3、empty(): 清空子元素
// 只清空子元素，自己本身不会删除
$('div:eq(0)').empty();
</script>
4.5 复制元素
<script type="text/javascript">
$(function(){
// 复制元素
// clone():复制元素的操作
// clone(boolean)：false：只复制本身，不复制事件，默认false
// true ：复制对象本身及事件
$('p').click(function(){
// 复制本身，并将复制的对象添加到父元素、
var $p1 = $(this).clone(true);
$('div').append($p1);
})
})
</script>
4.6 替换元素
<script type="text/javascript">
$(function(){
// 替换元素
// replaceWith(新的元素)
// $('#d1').replaceWith('<h1>早</h1>')
//$('div').replaceWith('<h2>原生</h2>')
// 新元素.replaceAll(旧元素)
$('<h4>周树人</h4>').replaceAll($('#d2'))
})
</script>
4.7 动态添加父子节点
<script type="text/javascript">
// 添加父节点 wrap(父节点)
$('button:eq(0)').click(function(){
// 给a标签添加一个div父标签
$('a').wrap('<div></div>')
})
// 删除父节点
$('button:eq(1)').click(function(){
$('a').unwrap()
})
// 整体添加父节点
$('button:eq(2)').click(function(){
$('a').wrapAll("<div></div>")
})
// 添加子节点
$('button:eq(3)').click(function(){
$('a').wrapInner('<b></b>')
})
</script>