一.如何筛选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对象
<!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)//获取值