版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84366781
创建HTML
- 创建一个div并显示到页面上
<script>
$(function() {
var div = $('<div>Hello</div>');
console.log(div);
div.appendTo('body'); //将div添加到body最后面
console.log($('div'));
}
</script>
- 创建一个a标签并为其添加属性的两种方法
<script>
var link = $('<a>', {
text: '百度',
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首页'
});
link.appendTo('body');
var link2 = $('<a>百度</a>').attr({
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首页'
});
link2.appendTo('body');
</script>
DOM元素选择
<script>
$(function () {
var elements = $('li');
console.log(elements.length); //获取li的数量
console.log(elements[0]); //获取指定的DOM元素
console.log(elements.get()); //获取全部的DOM元素
console.log(elements.get(0)); //获取指定的DOM元素
console.log(elements.get(-1)); //获取指定的DOM元素(从后向前)
console.log(elements.eq(0)); //获取指定的jQuery对象
console.log(elements.eq(-1)); //(从后向前)
console.log(elements.first()); //获取第一个jQuery对象
console.log(elements.last()); //获取最后一个jQuery对象
console.log(elements.toArray()); //和get()作用一样
});
</script>
通过关系查找jQuery对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>methods</title>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">通过关系查找jQuery对象的方法</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($('#box3').children()); //获取匹配元素集合中每个元素的所有子元素
console.log($('#box3').children('p')); //获取匹配元素集合中每个元素的所有p元素
console.log($('#box3').contents()); //获取匹配元素集合中每个元素的所有子元素，包括文本的注释节点
console.log($('#box3').find('.item1')); //获取当前匹配元素集合中每个元素的后代，有选择器筛选
console.log($('ul, #box3').parent()); //获取当前匹配元素集合中每个元素的父元素
console.log($('ul, #box3').parent('#box2')); //获取当前匹配元素集合中父元素为box2的元素
console.log($('ul, #box3').parents()); //获取当前匹配元素集合中每个元素的祖先元素(从父到祖先)
console.log($('ul, #box3').parents('#box2')); //获取当前匹配元素集合中祖先元素为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对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</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">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8
<ul></ul>
</li>
<li class="item9">item9</li>
</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) { //把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery对象
return this.id;
}));
console.log($('li').each(function (index, domElement) { //对jQuery对象进行迭代，为每个匹配元素执行函数
this.title = this.innerText;
}));
console.log($('#box3').children().is('p')); //根据选择器检查当前匹配元素集合
console.log($('#box3').children().end()); //结束当前链接中最近一次删选操作，并将匹配元素集合返回到前一次的状态
console.log($('#box3').end());
console.log( //将item3也改变样式
$('.item3').nextUntil('.item6').addBack().css('color', 'red')
);
});
</script>
</body>
</html>
操作元素的特性、属性和数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</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>