//js节点寻找
// var a = document.getElementById(\'ip\').parentNode;
// console.log(a);
// var a = document.getElementById(\'jd\').childNodes;
// console.log(a);
// var a = document.getElementById(\'jd\').lastChild;
// console.log(a);
// 事件冒泡
// document.getElementById(\'bd\').onclick= function(e){
// alert(\'子\')
//阻止父级冒泡
// e.stopPropagation();
//只会阻止标签自身默认动作事件,如果是在jq中是阻止冒泡和默认事件
// return false;
//取消标签的默认动作
// e.preventDefault();
//}
// document.getElementById(\'d\').onclick=function(){
// alert(\'父级\');
// }
// jq遍历
$(\'.p\').parent();//找到父级元素
$(\'.p\').parents();//可以一直找到最上级的元素
$(\'#bl\').children();//只能找到他的儿子
$(\'#bl\').find(\'a\');//可以找到他的孙子
$(\'#bl\').siblings();//可以找到他的同胞但是不包括自己
// jQuery hover事件修改样式
$(\'ul li\').hover(function(){
// 修改CSS样式 $(this)是鼠标放的当前元素
$(this).css(\'color\',\'red\')
},function(){
$(this).css(\'color\',\'yellow\')
})
// jQuery点击事件
$(\'#jj\').click(function(){
// $(\'#tj\').html(\'这是添加的内容\')
// $(\'#tj\').append(\'这是后添加的内容\')
$(\'#bd\').attr(\'href\',\'http//:www.w3school.com.\')
})
//jq阻止事件冒泡
$(\'#bd\').click(function(e){
alert(\'子\')
// return false;
e.stopPropagation();
})
$(\'#d\').click(function(){
alert(\'父级\')
})
// Class
// 删除Class名
$(\'#aa\').removeClass(\'a\');
// 添加Class名
$(\'#aa\').addClass(\'cur\');
// 判断是否有了Class名返回值的布尔类型
$(\'#aa\').hasClass(\'cur\');
// 如果有了Class就删除没有就添加
$(\'#aa\').toggleClass(\'cur\');
// 获取内容的宽高
$(\'#aa\').height();
$(\'#aa\').width();
//获取内容和内边距的宽高
$(\'#aa\').innerWidth();
$(\'#aa\').innerHeight();
//获取内容和内边距和边框的宽高
$(\'#aa\').outerWidth();
$(\'#aa\').outerHeight();
//添加元素
$(\'#jd\').append(\'<p class="m">在元素最后位置添加</p>\')
$(\'#jd\').prepend(\'<b>在元素第一个位置添加</b>\')
$(\'#jd\').after(\'在被选元素外的最后添加\')
$(\'#jd\').before(\'在被选元素外的前面添加\')
//$(\'#jd\').remove()//删除被选元素
//$(\'#jd\').empty();//删除被选的子元素
// 添加元素后绑定jq事件 body是固定的 on后面第一个是什么事件,然后是新增的类名 用在点击事件添加class后用这个来绑定新添加的元素
$(\'body\').on(\'click\',\'.m\',function(){
alert(\'绑定\')
})
这是点击按钮执行里面的内容
$(\'#bt\').click(function(){
$(\'#m\').append(\'<p class="k">这是添加在后面的段落</p>\');
$(\'#m\').prepend(\'<p>这是添加在前面的段落</p>\')
$(\'#m\').after(\'在被选元素外的后面添加\')
$(\'#m\').before(\'在被选元素的前面添加\')
})
这是给后来新添加的元素设置属性
$(\'body\').on(\'click\',\'.k\',function(){
$(\'.k\').empty();
})