DOM元素操作
- 创建HTML
- DOM元素选择
- 通过关系查找jQuery对象的方法
- 筛选和遍历jQuery对象
- 操作元素的特性、属性和数据
创建HTML
<script>
$(function() {
var div = $('Hello
');
console.log(div);
div.appendTo('body');
console.log($('div'));
}
</script>
<script>
var link = $('', {
text: '百度',
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首页'
});
link.appendTo('body');
var link2 = $('百度').attr({
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首页'
});
link2.appendTo('body');
</script>
DOM元素选择
<script>
$(function () {
var elements = $('li');
console.log(elements.length);
console.log(elements[0]);
console.log(elements.get());
console.log(elements.get(0));
console.log(elements.get(-1));
console.log(elements.eq(0));
console.log(elements.eq(-1));
console.log(elements.first());
console.log(elements.last());
console.log(elements.toArray());
});
</script>
通过关系查找jQuery对象的方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>methodstitle>
head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">通过关系查找jQuery对象的方法p>
<ul>
<li class="item1">item1li>
<li class="item2">item2li>
<li class="item3">item3li>
<li class="item4">item4li>
<li class="item5">item5li>
<li class="item6">item6li>
<li class="item7">item7li>
<li class="item8">item8li>
<li class="item9">item9li>
ul>
div>
div>
div>
<script src="jquery-1.12.4.js">script>
<script>
$(function () {
console.log($('#box3').children());
console.log($('#box3').children('p'));
console.log($('#box3').contents());
console.log($('#box3').find('.item1'));
console.log($('ul, #box3').parent());
console.log($('ul, #box3').parent('#box2'));
console.log($('ul, #box3').parents());
console.log($('ul, #box3').parents('#box2'));
console.log($('.item1').parentsUntil('#box1'));
console.log($('.item1').closest('div'));
console.log($('.item4').next('li'));
console.log($('.item4').nextAll('li'));
console.log($('.item4').nextUntil('.item7'));
console.log($('.item4').prev('li'));
console.log($('.item4').prevAll('li'));
console.log($('.item4').prevUntil('.item1'));
console.log($('.item4').siblings());
console.log($('.item4').siblings('.item2'));
});
script>
body>
html>
筛选和遍历jQuery对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?p>
<ul>
<li class="item1">item1li>
<li class="item2">item2li>
<li class="item3">item3li>
<li class="item4">item4li>
<li class="item5">item5li>
<li class="item6">item6li>
<li class="item7">item7li>
<li class="item8">item8
<ul>ul>
li>
<li class="item9">item9li>
ul>
div>
div>
div>
<script src="jquery-1.12.4.js">script>
<script>
$(function () {
console.log($('.item1').add('.item2'));
console.log($('li').not('.item2, .item3'));
console.log($('li').filter('.item2, .item3'));
console.log($('li').not(function (index) {
return $(this).hasClass('item1');
}));
console.log($('li').filter(function (index) {
return $(this).hasClass('item1');
}));
console.log($('li').has('ul'));
console.log($('li').slice(0));
console.log($('li').slice(3, 5));
console.log($('li').slice(-2));
console.log($('div').map(function (index, domElement) {
return this.id;
}));
console.log($('li').each(function (index, domElement) {
this.title = this.innerText;
}));
console.log($('#box3').children().is('p'));
console.log($('#box3').children().end());
console.log($('#box3').end());
console.log(
$('.item3').nextUntil('.item6').addBack().css('color', 'red')
);
});
script>
body>
html>
操作元素的特性、属性和数据
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
head>
<body>
<img id="logo" src="../logo1.jpg" alt="jQuery logo" title="jQuery logo" />
<img id="logo2" src="../logo1.jpg" alt="jQuery logo" class="img-jquery2" title="jQuery logo" />
<input type="checkbox" id="check" tabindex="1" style="width:50px; height: 50px;" title="Check this!" description="just a checkbox" />
<script src="../../../vendor/jquery-1.12.4.js">script>
<script>
$(function() {
var img = $('img');
var checkbox = $('#check');
console.log(img.attr('id'));
console.log(checkbox.attr('TABINDEX'));
console.log(img.attr({
title: 'new title2',
alt: 'new alt2'
}));
console.log(img.attr('title', function(index, previousValue) {
return previousValue + '-' + index;
}));
console.log(img.removeAttr('title alt'));
console.log(checkbox.prop('checked'));
console.log(checkbox.prop('checked', true));
console.log(checkbox.removeProp('checked'));
img.data('description', 'jquery logo');
console.log(img.data('description'));
$('#logo').removeData();
console.log($('#logo').data());
});
script>
body>
html>
