前端系列之jQuery(jQueryDOM操作)
2018-01-31 11:48
513 查看
一.如何筛选jQuery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery chapter 2 Demo</title>
</head>
<body>
<div id="div">div</div>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var DOMObject = document.getElementById('div');
var jQueryObject =$('#div');
console.log(DOMObject);
console.log(jQueryObject);
//检测方式
console.log(DOMObject.nodeType);
console.log(jQueryObject.jquery);//显示版本号
// console.log(DOMObject.jquery);//undefined
// console.log(jQueryObject.nodeType);//undefined
//转换
console.log($(DOMObject));
console.log(jQueryObject.get(0));
})
</script>
</body>
</html>如何创建元素
$('<div>Hello</div>');<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery chapter 2 Demo</title>
</head>
<body>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var div= $('<div>Hello</div>');
console.log(div);
div.appendTo('body');//追加到body的最后面
console.log($('div'));
})
</script>
</body>
</html>设置属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery chapter 2 Demo</title>
</head>
<body>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
//第一种方式
var link1 = $('<a>',{//注意：此处必须是空元素，如<a>123</a>，则后面属性无法添加
text:'baidu',
href:'http://ww.baidu.com',
target:'_blank',
title:'goto baidu'
});
link1.appendTo('body');
//第二种方式
var link2 = $('<a>baidu</a>').attr({
href:'http://ww.baidu.com',
target:'_blank',
title:'goto baidu'
});
link2.appendTo('body');
})
</script>
</body>
</html>检查和获取元素
检查元素数量
$('xxx').length提取元素
[index]返回DOM元素
get([index]) 返回DOM元素或元素集合
eq(index) 返回jQuery对象
first()
last()
toArray()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li class="item-1">item-1</li>
<li class="item-2">item-2</li>
<li class="item-3">item-3</li>
<li class="item-4">item-4</li>
<li class="item-5">item-5</li>
<li class="item-6">item-6</li>
<li class="item-7">item-7</li>
<li class="item-8">item-8</li>
<li class="item-9">item-9</li>
</ul>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var elements= $('li');
//检查元素数量
console.log(elements.length);
// var elements2=$('div');
// console.log(elements2[0].style.color='blue');//报错TypeError: undefined is not an object (evaluating 'elements2[0].style')
// console.log(elements2.eq(0).addClass('blue'));//不会报错
//提取元素
console.log(elements[0]);
console.log(elements.get());
console.log(elements.get(-1));
console.log(elements.get(100));
console.log(elements.eq(0));
console.log(elements.eq());
console.log(elements.eq(-1));
console.log($('li:eq(0)'));//筛选器 建议使用eq方法，要比eq筛选器性能高很多倍
console.log(elements.first());
console.log(elements.last());
console.log(elements.toArray());//和get()方法一样
})
</script>
</body>
</html>通过关系查找jQuery对象
<
15dc6
/p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<div>
<p id="info">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Hic,rem?</p>
<ul>
<li class="item-1">item1</li>
<li class="item-2">item2</li>
<li class="item-3">item3</li>
<li class="item-4">item4</li>
<li class="item-5">item5</li>
<li class="item-6">item6</li>
<li class="item-7">item7</li>
<li class="item-8">item8</li>
<li class="item-9">item9</li>
</ul>
</div>
</div>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
// var element = $('#info').parents();
// var element = $('#info').parents('div');
// console.log(element);
//
// var element2 = $('#box').children();
// var element2 = $('#box > *');//相当于上面的方法
// console.log(element2);
//
// var element3 = $('#info').children();
// var element4 = $('#info').contents();//返回文本节点
// console.log(element3);
// console.log(element4);
//children和contents只返回直接子元素
// console.log($('#box').children('ul'));
// console.log($('#box').contents());
//find返回子元素和孙子元素
// console.log($('#box').find('ul'));
// console.log($('#box').find('.item-3'));
//parent([selector]) 返回直接父元素
// console.log($('#info').parent('#box'));
//parents([selector]) 返回所有的父元素
// console.log($('#info').parents('#box'));
//parentsUnitil([selector]) 必须带有选择器，到选择器为止的所有父元素
//closest(selector) 从本身（首先检查当前元素是否匹配）开始逐级向上进行元素匹配，并返回最先匹配的元素
console.log($('#info').closest('#info'));
})
</script>
</body>
</html>通过兄弟姐妹元素进行查找
next()向下查找同级元素
pre()向上查找同级元素
注意：siblings不包含本身，查找所有的同级元素
筛选和遍历jQuery对象
增加元素<script>
$(function(){
console.log($('.item-1,.item-2'))
console.log($('.item-1').add('.item-2').add('.item-3'))
})
</script>过滤元素
not(selector) ：不要选择器中的元素
filter(selector)：需要选择器中的元素
has(selector):保留了特定后代的元素
<script>
$(function(){
// console.log($('li').not('.item-4'))
// console.log($('li').filter('.item-4'))
console.log($('li').not(function(index){
return $(this).hasClass('item-4')
}));
console.log($('li').filter(function(index){
return $(this).hasClass('item-4')
}));
console.log($('li').has('ul')) //保留了特定后代的元素
})
</script>获取子集
slice(start[,end])
$(function(){
console.log($('li').slice(3,5))
})转换元素
map(callback)
$(function(){
console.log($('li').map(function(index,domElement){
return this.id;
}))
})遍历元素
each(iterator)
<script>
$(function(){
console.log($('li').each(function(index,domElement){
this.title=this.innerText;
}))
})
</script>jQuery对象的其他操作
is(selector)查询是否有选择器中的元素 end()回到破坏性操作之前 破坏性操作：任何对jQuery对象进行改变的操作 addBack([selector])想进行一些破坏性操作，但是还想把原来的元素包含进来
$(function(){
$('#box2').find('.item-4').css('color','red').end().find('.item-6').css('color','blue')
})<script>
$(function(){
console.log( $('.item-4').nextUntil('.item-6').addBack().css('color','orange'))
})
</script>二.操作元素的特性、属性和数据
元素的特性和属性值的获取attributes:值为string
properties:值为string、boolean、number、object
元素特性和属性值的区别
1、如果特性attributes 是本来在DOM对象中就存在的，attributes和properties（属性）的值会同步。
2、如果attributes是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties的值不会同步；
3、如果attributes不是DOM对象内建的属性，attributes和properties的值不会同步；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id='logo' src="09/login.png" alt="jQuery logo" class="img-jquery" title="jQuery log" />
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="Check this!" description="just a checkbox" checked='ture'/>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var checkbox =document.getElementById('check');
//元素的属性和特性会保持动态链接，会同时改变
//设置属性
checkbox.title ="new title";
//设置特性
checkbox.setAttribute('title','another title');
console.log(checkbox.getAttribute('title'));
console.log(checkbox.title);
console.log(checkbox.getAttribute('title') === checkbox.title);//特性与属性同时改变且相等
//如果attributes是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties的值不会同步；
checkbox.checked =false;
checkbox.setAttribute('checked',false);
console.log(checkbox.checked);//Boolean
console.log(checkbox.getAttribute('checked'));//String
var img =document.getElementById('logo');
console.log(img.src);//http://127.0.0.1:8020/jQueryDemo/09/login.png
console.log(img.getAttribute('src'));//09/login.png
})
</script>
</body>
</html>操作元素的特性
获取特性的值：
attr(name)
设置特性的值：
attr(name,value) attr(attributes)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id='logo' src="09/login.png" alt="jQuery logo" class="img-jquery" title="jQuery log" />
<img id='logo2' src="09/login.png" alt="jQuery logo2" class="img-jquery2" title="jQuery log2" />
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px;" title="Check this!" description="just a checkbox" checked='ture'/>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var img =$('img');//包含两个元素
console.log(img.attr('title'));//只获取到第一个
console.log(img.attr('title','123'));//同时改变了两个值
console.log(img.attr('title'));
img.attr({
title:'new title',
alt:'new alt',
tabIndex:2
})
console.log(img);
img.attr('title',function(index,previousValue){
console.log(previousValue);
return previousValue;
})
})
</script>
</body>
</html>操作元素的属性
获取属性的值：
prop(name)
设置属性的值：
pro(name,value) prop(properties)
删除属性的值：
removeProp(name)
$(function(){
var checkbox = $('#check');
console.log(checkbox.prop('checked'));
console.log(checkbox.get(0).checked);
console.log(checkbox.attr('checked'));
})在元素中存取数据
获取数据的值:
data([name])
设置数据的值:
data(name,value) data(object)
删除数据的值：
removeData([name])
三.修改jQuery对象的内容和样式
在页面中操作DOM元素修改元素的样式
添加或修改class
addClass(names) removeClass(names) hasClass(name)//判断是否有某个类 toggleClass(names][,switch])//切换某个类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #ccc;
}
.red{
background-color: red;
}
.b10{
border: 10px solid #000;
}
.m10{
margin: 10px;
}
.p10{
padding: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="box" id="demo">div</div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var elemnt = $('#demo');
elemnt.addClass('red b10 m10 p10');
elemnt.removeClass('red m10 p10');
elemnt.addClass(function(index,className){
console.log(index);
console.log(className);
return 'red';
})
elemnt.removeClass(function(index,className){
console.log(index);
console.log(className);
return 'red';
})
// if(elemnt.hasClass('hide')){
// elemnt.removeClass('hide');
// }else{
// elemnt.addClass('hide');
// }
// elemnt.toggleClass('hide');
$('li').each(function(index){
$(this).toggleClass('red',index % 3 ===0);
})
})
</script>
</body>
</html>获取或设置style
css(name,value)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box hide" id="demo">div</div>
<script src="vendor/jquery-1.12.4.js"></script>
<script>
$(function(){
var element = $('#demo');
element.css('width',200);
element.css({
'background-color':'red',
height:200,
border:'10px solid #000',
marginTop:100
})
element.css('height',function(index,value){
console.log(value);
return parseInt(value,10)+50;
})
console.log(element.css('height')) ;
})
</script>
</body>
</html>获取或设置元素尺寸
修改样式（width()、innerWidth()、outerWidth()）
width() height() innerHeight(value)//包含内边距，不包含边框和外边距 innerWidth(value) outerWidth(value)//包含内边距和边框，外边距不一定 outerHeight(value)
获取或设置位置和滚动
offset(coordinates)//返回对象集合中第一个元素，以像素计算，只对显示元素有效 position()//获取离元素最近的，具有相对位置的距离。如果没有则返回浏览器文档的距离 scrollLeft(value) scrollTop(value)
四.jQuery对象的文档处理
移动或插入元素append(content[,content,...,content])//插入，在最后面追加内容 prepend(content[,content,...,content])//在最前面追加内容 before(content[,content,...,content])//外部插入，元素之前 after(content[,content,...,content])//外部插入，元素之后
//与append功能类似，思维相反 appendTo(target) prependTo(target) insertBefore(target) insertAfter(target)
包裹元素
wrap(wrapper) wrapAll(wrapper)
移除元素
remove([selector]) detach([selector])//都是移除，但是保存了这个对象的事件和数据 empty() //保留元素，只是清除元素的内容
复制和替换元素
clone([Even[,deepEven]])//参数1：是否复制本身，顶级元素的事件和数据 参数2：深度克隆，是否复制其子元素的事件和数据
//替换元素 replaceWith(content) replaceAll(target)
处理表单元素值
val()//设置值 val(value)//获取值
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 打杂之WEB前端（一） jQuery 操作DOM总结，DOM Core操作
- jQuery系列(三）：操作DOM
- jQuery系列：DOM操作
- 前端编程提高之旅（十四）----jquery DOM操作
- web前端之锋利的jQuery三：jQuery中的DOM操作
- jQuery-1.9.1源码分析系列（十一） DOM操作
- jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点
- Jquery-1.9.1源码分析系列（十一）之DOM操作
- jQuery原理系列-常用Dom操作详解
- jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
- jQuery系列2---DOM操作和事件
- jQuery-1.9.1源码分析系列（十一） DOM操作续——克隆节点
- Jquery-1.9.1源码分析系列（十一）之DOM操作
- Jquery系列（三） DOM操作
- 打杂之WEB前端（二） jQuery 操作DOM总结，DOM Html操作，DOM Css操作
- jQuery-1.9.1源码分析系列（十一） DOM操作
- jquery系列教程3-DOM操作全解
- jQuery - 小鸟系列之DOM操作
- jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
- jQuery原理系列-常用Dom操作