A.我今天学了什么
1.查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-size: 25px;
}
</style>
</head>
<body>
<ul class="uls" style="position: relative;">
<li>1</li>
<li>2</li>
<li class="lis-3">3</li>
<div>div</div>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="lis-9" style="position: relative;">9
<p class="p">这是li内部p标签</p>
<p class="p">这是li内部p标签</p>
<h4>这是li内部h4标签</h4>
<h4>这是li内部h4标签</h4>
<i>这是li内部i标签</i>
<i>这是li内部i标签</i>
</li>
<li>10
<h4>这是li内部h4标签</h4>
<h4>这是li内部h4标签</h4>
<ul>
<li>
<p class="p">这是一个p标签</p>
</li>
</ul>
</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d
<h4>这是li内部h4标签</h4>
<h4>这是li内部h4标签</h4>
</li>
</ul>
<div>
<p>这是一个p标签</p>
</div>
<button id="button">button</button>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var btn = $('button');
var lis = $('.uls li');
var uls = $('.uls');
//查找元素
//1.查找子元素
/*$('.lis-9').children().css('color','red');//查找所有子元素
$('.lis-9').children(':first').css('color','cyan');//查找第一个子元素
$('.lis-9').children('h4').css('color','orange');//查找指定类型的子元素*/
//2.查找最近的一个指定父级
//$('p').closest('li').css('color','red');//所有P标签的父级，只要是li，就选中
//3.查找后代元素
//find()，里面跟上查找条件
//lis.find('[class]').css('color','red')
//4.查找下一个兄弟节点
//$('.lis-3').next().css('color','red')
//5.查找后面的所有兄弟节点
//$('.lis-3').nextAll().css('color','red')
//6.查找后面的所有兄弟节点到指定元素
//从lis-3后面开始找，找到有class的兄弟节点，就打住，并且不包含有clas的兄弟节点
//$('.lis-3').nextUntil('[class]').css('color','cyan')
//7.查找上一个兄弟节点
//$('.lis-3').prev().css('color','red');
//8.查找前面的所有兄弟节点
//$('.lis-3').prevAll().css('color','cyan')
//9.查找父级元素
//$('i').parent().css('background','red')
//10.查找所有上一级的元素，直到HTML为止
//$('i').parents().css('background','red')
//11.查找所有上一级的元素，直到指定元素为止（不包括指定元素）
//$('i').parentsUntil('ul').css('background','red')
//12.查找最近的带有定位的父级元素
//$('i').offsetParent().css('background','red')
//13.查找所有兄弟节点，但是不包括自己，并且可以设置兄弟节点类型
//$('.lis-3').siblings('div').css('color','red')
//向当前JQ对象追加新元素，追加的可以是DOM节点，也可是JQ对象，不会改变原有JQ对象，返回一个新的JQ对象
//相当于 var a = $('.lis-3').add($('p'))
//一次性把$('.lis-3')和$('p')给找到，并且放在一个集合里面
var a = $('.lis-3').add($('p'))
a.css('color','red')
console.log($('.lis-3').add($('p')))
console.log($('.lis-3'))
})
</script>
</html>
2.筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-size: 25px;
}
</style>
</head>
<body>
<ul class="uls" style="position: relative;">
<li>1</li>
<li>2</li>
<li class="lis-3">3</li>
<div>div</div>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="lis-9" style="position: relative;">9
<p class="p">这是li内部p标签</p>
<p class="p">这是li内部p标签</p>
<h4>这是li内部h4标签</h4>
<h4>这是li内部h4标签</h4>
<i>这是li内部i标签</i>
<i>这是li内部i标签</i>
</li>
<li>10
<h4>这是li内部h4标签</h4>
<h4>这是li内部h4标签</h4>
<ul>
<li>
<p class="p">这是一个p标签</p>
</li>
</ul>
</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d
<h4>这是li内部h4标签</h4>
<h4>这是li内部h4标签</h4>
</li>
</ul>
<div>
<p>这是一个p标签</p>
</div>
<button id="button">button</button>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
$(function(){
var btn = $('button');
var lis = $('.uls li');
//过滤
//1.eq();查找JQ对象中的指定索引对象
//eq(i)通过索引值找到对象，和arr[i]意思一样
/*lis[2].css('color','red');//因为这样获取他会变成DOM对象
lis.eq(2).css('color','cyan');//这样就可以，因为没有吧元素从数组中提取出来，而是帅选找到了他而已
console.log(lis[2])
console.log(lis.eq(2))*/
//2.first()查找第一个
//lis.first().css('color','red')
//3.last()查找最后一个
//4.hasClass(),判断一个JQ对象中是否具有指定的class，只要集合中有一个对象包晗class，就返回true
//要注意，它返回的不是查找对象，而是布尔值
//用这个方法，你找不到对象，只能判断对象是否存在而已
//console.log(lis.hasClass('lis-3'))
//5.is()判断当前JQ对象是否是指定的类型、选择器
/*console.log(lis.eq(2).is('li'));//判断lis里面的第二个元素是不是li标签
console.log(lis.eq(2).is(lis));//判断lis里面的第二个元素是不是在lis里面
console.log(lis.eq(2).is(':nth-of-type(3)'));//判断是不是当前集合的第三个元素*/
//6.map()给JQ中的每一个对象一个函数，参数只能是函数
/*var a,b,c,d,f;
var arr = [a,b,c,d,f]
arr.map(function(){
console.log(this)
})
//这样子，就可以给arr里面的每一个元素添加一个console.log*/
/*btn.click(function(){
lis.map(function(){
console.log($(this))
})
})*/
//7.has()选择子元素有指定选择器或者标签的元素
//$('li').has('[class]').css('color','red')
//8.not()反选
/*var lisn = lis.not('[class]');
console.log(lisn)*/
//9.slice() 根据范围选择
/*lis.slice(2).css('color','red');//从2开始截取，2后面的都被选中
lis.slice(2,5).css('color','cyan');*/
})
</script>
</html>
3.属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box" class="ct">
我是一只羊
</div>
<input type="text" name="" value="我是一个input" />
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var box = $('#box');
//JQ属性操作
//1.添加或者修改属性 attr()
//第一种写法：普通写法，就是在原本属性上面修改，如果没有这个属性，就添加
/*box.attr('class','tc');
box.attr('init','big')*/
//第二个写法：连缀写法；
// box.attr('class','tc').attr('init','big').attr('index','100');
//对象写法：
/*box.attr({
'class':'ttl',
'init':'asd'
})*/
//移除属性 removeAttr;
//box.removeAttr('class');
/*//class操作
//添加class addClass
box.addClass('tt')
//移除 removeClass
box.removeClass('ct')*/
//内容的获取与操作
/*var txt = box.html();//获取元素内容
console.log(txt)*/
//设置内容
/*box.click(function(){
box.html('<div>我变成一头牛了</div>')
})*/
//a.html()方法可以设置元素内容，但是，如果你想设置与标签相同的字符串，他会自动识别为HTML标签，并且转换
//如果，你想把与标签相同的字符串显示在元素内，则采用text()方法
/*var txt = box.text();
console.log(txt)*/
/*box.click(function(){
box.text('<p>我变成一头牛了</p>')
})*/
//获取input的值
box.click(function(){
console.log($(':text').val());//获取input的value值
})
</script>
</html>
网友评论