jQuery
DOM操作
查找节点
查找元素节点
以选择器来查找元素节点
查找文本节点
以text()方法来查找文本节点
查找属性节点
以attr()方法来查找属性节点
<body>
<script src="js/jquery.js"></script>
<script></script>
</body>
<script is="qyc"> name="button"</script>
<script>
var $qyc = $('#qyc');
console.log('$qyc');
console.log($qyc.text);
console.log($qyc.attr('neme'));
$qyc.text('新按钮')
$qyc.attr('class','cls');
/*
* jQuery查找元素-
* text()方法-等于DOM的textContent属性
* 获取-text()
* text(textContent)
* textContent新的的文本内容
*
* attr()方法
* 获取- attr（name,value）-等于DOM的setAttribute(mnm，valus)*/
</script>获取父节点
selector:便是jQurery中的选择器 另外parent()：获取父级元素 parents()：获取祖先级元素 closest():匹配上级元素，并返回相同的元素
<body>
<div class="qh">
<ul>
<li id="dy">端游</li>
<li>单机</li>
<li>手游</li>
</ul>
</div>
<script>
var $dy = $('#dy');
console.log($dy.psrent('div'));
/*获取端游节点所有祖先节点
* parent(expr)方法
* 获取元素所有父元素
* expr-表示选择器，并有过滤的作用
*/
console.log($dy.psrent('div'));
/*获取端游节点所有祖先节点
* parents(expr)方法
* 获取元素所有祖先元素
* expr-表示选择器，并有过滤的作用
*/
console.log($dy.chosect('div'));
/*closest()方法
* 获取元素指定祖先元素；返回第一个匹配元素
* expr-表示为选择器，并有过滤的作用
* 注意- jQuery用不报错，不会提供结果
*/
</script>
</body>获取子节点
children()只获取子级元素（不获取后代元素）
<script src="js/jquery.js"></script>
</head>
<body>
<div class="qh">
<ul id="dy">端游
<li>联盟</li>
<li>地下城</li>
<li>火线</li>
</ul>
<ul>手游</ul>
<ul>页游</ul>
</div>
<script>
var $ul = $('ul:first');
console.log($ul.children());
// 获取元素所有的子元素
console.log($ul.find('li'));
// 获取元素的后代元素
</script>
</body>获取兄弟节点
next()：获取元素的下一个相邻兄弟元素 prev()：获取元素的上一个相邻兄弟元素 siblings：获取元素所有兄弟元素
<body>
<div class="qh">
<ul>
<li id="dy">端游</li>
<li>单机</li>
<li>手游</li>
</ul>
</div>
<script>
var dy = document.getElementById('dy');
var ul = dy.parentElement;
var div = ul.parentElement;
var body = div.parentElement;
var html = body.parentElement;
var root = html.parentElement;//null
console.log(root);
var arr = [];//用于存储元素的所有祖先元素
function parents(element) {
var parent = element.parentElement;
// 获取元素的父元素
if(parent === null){ return; }
arr.push(parent);
// 获取父元素，并增加到数组中
parents(parent);
// 定义个递归函数
}
parents(dy);
console.log(arr);
</script>
</body>查找后代元素
以find：获取所有匹配其元素的选择器
<body>
<div class="qh">
<ul id="qh">
<li>端游</li>
<li>单机</li>
<li id="sy">手游</li>
<li>掌机</li>
</ul>
</div>
<script>
var $sy = $('#sy');
console.log($sy.next());//获取下个相邻兄弟元素
console.log($sy.prev());//获取上个相邻兄弟元素
</script>
</body>3.创建节点
工厂函数：以attr()该属性来建立属性节点
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
<li>端游</li>
<li>单机</li>
<li id="sy">手游</li>
<li>掌机</li>
</ul>
<script>
// var $newli = $('<li></li>');
// $newli.text('掌机');
// $newLi.attr('id','zj');
var $newli = $('<li id="q1">页游</li>');
// jQuery的工厂函数接收字符串类型HTML代码
$('#qh').append($newli);
</script>
</body>4.插入节点
插入内部节点
append()方法
表示插入到指定节点列表中的最后面
appendTo()方法
表示插入到指定节点列表中的最后面
prepend()方法
表示插入到指定节点列表中的最前面
prependTo()方法
表示插入到指定节点列表中的最前面
<body>
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
<li>端游</li>
<li>单机</li>
<li id="sy">手游</li>
<li>掌机</li>
</ul>
<script>
// var $newli = $('<li></li>');
// $newli.text('掌机');
// $newLi.attr('id','zj');
var $newli = $('<li id="q1">页游</li>');
// jQuery的工厂函数接收字符串类型HTML代码
$('#qh').append($newli);
</script>
</body>插入外部节点
before()方法
表示插入到指定元素节点前一个位置
insertBefore()方法
表示插入到指定元素节点前一个位置
after()方法
表示插入到指定元素节点后一个位置
insertAfter()方法
表示插入到指定元素节点后一个位置
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>端游</li>
<li>单机</li>
<li>手游</li>
</ul>
<script>
var $li = $('<li id="q1">页游</li>');
// 创建新li元素
// $('ul').before($li);
// 插入li元素的上方
$('ul').after($li);
// 插入li元素下方
</script>
</body>5.删除节点
remove():用来删掉DOM所有的元素 empty():用来删除DOM的所有子节点
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">联盟</li>
<li>火线</li>
<li>地下城</li>
</ul>
<script>
//元素调用remove()该元素被删除
// $('#lm').remove();
// empty()表示删除后代节点；保留自身节点-清空
</script>
</body>6.替换节点`
replaceWith()方法将所有匹配元素替换成HTML和DOM元素
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">联盟</li>
<li>火线</li>
<li>地下城</li>
</ul>
<script>
// 替换的元素调用replaceWith()，该方法接收参数是替换元素
// $('#lm').replaceWith($('<li id="zj">战甲</li>'));
// replaceAll()就是颠倒replaceWith()
$('<li id="zj">战甲</li>').replaceAll(('#lm'));
</script>
</body>7.复制节点
jQuery的clone方法 – 参数表示是否复制事件
DOM的cloneNode方法 – 参数表示是否复制后代节点
<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按钮</button>
<script>
$('#qyc').click(function () {
console.log('you my button');
});
var $copy = $('#qyc').clone(true);
$('body').append($copy);
/*jQuery的clone方法 - 参数表示是否复制事件
DOM的cloneNode方法 - 参数表示是否复制后代节点
*/
</script>
</body>8.属性节点
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">联盟</li>
<li>火线</li>
<li>地下城</li>
</ul>
<script>
$('#bj').removeAttr('id');
// removeAttr()-相当于DOM中的removeAttribute()
</script>
</body>9.样式操作
<style>
.qh {
width: 200px;
height: 200px;
border: 1px solid blue;
}
.cq {
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: red;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="qyc"></div>
<script>
// $('#qyc').attr('style','width:100px;height:100px;background-color:red;');
// attr设置style属性的样式
$('#qyc').attr('class','qh');
// 通过设置class属性为<div>元素添加外联样式
$('#qyc').addClass('cq');
// $('#qyc').attr('class','cq');// 替换样式
// addClass(className)方法 - 表示添加样式(并不影响指定元素原本的样式)
console.log($('#qyc').hasClass('qh'));
// hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
console.log($('#qyc').css('width'));
/* removeClass()方法 - 删除样式
* removeClass()方法 - 删除所有样式
* removeClass(className) - 删除指定样式
*/
// $('#qh').removeClass('cq');
// toggleClass()方法 - 在删除指定样式与添加指定样式之间切换
// $('#qh').toggleClass('cq');
// hasClass(className)方法 - 判断指定元素中是否包含指定样式名称
$('#qyc').css({
width: '600px',
height: '600px'
});
</script>
</body>10.HTML操作
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">联盟</li>
<li>火线</li>
<li>地下城</li>
</ul>
<script>
console.log($('#yx').html());
var $html = $('#yx').html();
$html += '<li>战甲</li>';
$('#yx').html($html);
console.log($('input').val());
$('input').val('密码');
</script>
</body>
