前端路线--JQuery（day02）
01-创建Html元素.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
</div>
</body>
<script type="text/javascript">
//1.创建元素直接在$('')写标签
//3.追加元素:appendTo()
// $('.box').append(p1)
$(function () {
var p1=$('你好哇
');
// p1.appendTo($('.box'));
$('.box').append(p1);
})
</script>
</html>
02-根据关系获取集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>1</li>
<li class="t">2</li>
<li class="t">3</li>
<li class="a">4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script type="text/javascript">
//根据关系获取集合 ()里都可以加过滤器
$(function() {
//1.得到亲爸爸 .parent()
$('li').parent().css('backgroundColor', 'pink');
//2.得到祖先元素
console.log($('li').parents());
//3.得到亲儿子
$('ul').children().css('color', 'yellow');
//4.找到调用者下符合条件的元素
$('ul').find('.t').css('color', 'blue');
//5.得到上一个兄弟元素
$('.a').prev().css('color', 'orange');
//6.得到之前所有的兄弟
$('.a').prevAll().css('font-size', '30px');
//7.得到下一个兄弟元素
$('.a').next().css('color', 'red');
//8.得到下面所有的兄弟元素
$('.a').nextAll().css('color', 'red');
//9.得到所有的兄弟元素
$('.a').siblings().css('color', 'deepskyblue');
})
</script>
</html>
03-操作集合的其他方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="third-item">3</li>
<li id="four-item">4</li>
<li>5</li>
</ul>
<p>Hello<a href="http://www.baidu.com/">百度</a>搜索</p>
<p>
<span>end测试1</span>
<span>end测试2</span>
</p>
</body>
<script type="text/javascript">
$(function () {
//1.将元素追加到获取的集合里 .add('元素')
$('li').add('p').css('color','blue');
//2.查找操作对象的子节点(不包括文本节点) .contents().
$('p').contents().css('color','red');
//3.结束调用链中的最近的过滤操作
$('.third-item').siblings().end().css('color','pink');
})
</script>
</html>
04-JQ中的排他思想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li class="target">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script type="text/javascript">
$(function () {
//JQuery的排他思想
$('.target').css('color','skyblue').siblings().css('color','red');
/*
JQuery的特性:
1.隐式迭代
2.链式操作
*/
})
</script>
</html>
05-JQuery的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">点击我</button>
<h1>你好哇</h1>
</body>
<script type="text/javascript">
//JQ里的所有事件不加on，只需要调用函数
//1.点击事件:
// $('button').click(function () {
// console.log('222');
// })
//2.用on('事件类型',回调函数)添加事件
//on()可以添加多个事件，中间用空格隔开
$('button').on('mouseenter',function () {
$(this).css('color','pink');
})
//3.off('事件名') //移除事件
//不加参数默认为移除所有事件
$('button').off();
//4. .hover(回调函数1,回调函数2) //鼠标进入和离开
//回调函数1:鼠标进入
//回调函数2::鼠标离开
$('h1').hover(function () {
$(this).css('color','pink');
},
function () {
$(this).css('color','');
});
</script>
</html>
06-样式的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">hello</div>
</body>
<script type="text/javascript">
//1.设置多个CSS样式 里面用键值对的形式，用""
$('.box').css({
'font-size':'20px',
'color':'orange'
})
//2. .css('属性名') //返回CSS的值
console.log($('.box').css('color'));
</script>
</html>
07-类名的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.active{
font-size: 30px;
color: orange;
}
.active2{
background-color: aqua;
}
</style>
</head>
<body>
<div>你好，我是div</div>
<h1>你好，我是h1</h1>
</body>
<script type="text/javascript">
//1. .addClass('类名') //添加类名
$('div').addClass('active');
//2. .removeClass('类名'); //移除类名
$('div').removeClass('active');
//3.切换类名
$('h1').click(function (e) {
$(this).toggleClass('active2')
});
//4.是否具备某个样式
console.log($('div').hasClass('active'));
</script>
</html>
08-JQ的DOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
$(function () {
//1.attr('属性名','属性值'); //设置属性
$('.box').attr('id','box');
//2..removeAttr('属性名') //移除属性
$('.box').removeAttr('id');
/*
总结:给标签添加的属性
*/
//3..prop('属性名','属性值') //设置属性
$('.box').prop('name','哈哈');
console.log($('.box'));
//4..removeProp('属性名') //移除属性
$('.box').removeProp('name');
/*
总结:1.只能移除自己定义的属性
2.使用.prop()设置的属性是加在了JS对象中(DOM)
3.不要使用该方法来移除诸如 style、id 或 checked 之类的 HTML 属性。请使用 removeAttr()
*/
})
</script>
</html>
09-样式的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: solid 1px orange;
padding: 20px;
position: relative;
}
.son{
width: 100px;
height: 100px;
position: absolute;
border: solid 1px #ccc;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div class="box">你好我是BOX
<div class="son">你好,我是孩子</div>
</div>
</body>
<script type="text/javascript">
//1.获取宽高 (500)都可以设置
console.log($('.box').width());
console.log($('.box').height());
//获取宽高(包含padding)
console.log($('.box').innerWidth());
console.log($('.box').innerHeight());
//获取宽高(包含padding和border)
console.log($('.box').outerWidth());
console.log($('.box').outerHeight());
//2.获取集合中第一个元素在文档中的位置(即margin)
console.log($('.box').offset());
//还可以进行设置
$('.box').offset({
top:30,
left:40
});
console.log('------');
console.log($('.box').offset());
//3.返回偏移父辈的位置 不可以进行设置
console.log($('.son').position());
</script>
</html>
10-复制元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<hr>
</body>
<script type="text/javascript">
$(function () {
$('.box').click(function () {
console.log('111');
})
//1..clone(true) //克隆元素
//true:克隆元素和事件 false:只克隆元素
$('.box').clone(true).appendTo('body');
})
</script>
</html>
11-内部插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<form action="" method="post">
<button type="button">按钮</button>
<input type="input" value=""/>
</form>
</div>
<hr>
</body>
<script type="text/javascript">
$(function () {
//1. .html('元素') //向页面设置Html元素 还可以获取
$('.box').html('7
');
//2. .text('文本') //向页面设置文本 还可以获取
$('.box').text('你好');
//3. .val() //设置或获取表单的值
// $('button').click(function () {
console.log($('input').val());
// })
//4. .append('元素') //追加元素在之后
$('.box').append('8
');
//5. .prepend('元素') //追加元素在之前
$('.box').prepend('9
');
//6. .appendTo('被追加的对象'); //追加元素在之后
$('10
').appendTo($('.box'));
//7. .prependTo('被追加的对象'); //追加元素在之前
$('16
').prependTo($('.box'));
})
</script>
</html>
12-外部插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<p class="target">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p class="target2">6</p>
</div>
</body>
<script type="text/javascript">
//外部插入
$(function () {
//1. .insertBefore($('目标元素')) //将元素插入到目标元素前
$('888
').insertBefore($('.target'));
//2. .insertAfter($('目标元素')) //将元素插入到目标元素前
$('999
').insertAfter($('.target'));
//3. .before($('插入的元素')); //追加元素在之前
$('.target2').before($('之前
'));
//4. .after($('插入的元素')); //追加元素在之后
$('.target2').after($('之后
'));
})
</script>
</html>
13-删除元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<p class="target">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p class="target2">6</p>
</div>
</body>
<script type="text/javascript">
$(function () {
$('.target').mouseover(function () {
$(this).css('color','red');
});
//1. .remove() //删除元素(包括事件)
$('.target').remove();
//2. .empty() //移除元素内容(不包括事件)
$('.target').empty();
//3. .detach() //移除元素内容(返回当前元素 保留事件)
var recieve=$('.target').detach();
console.log(recieve);
})
</script>
</html>
14-替换元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="JS/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<p class="target">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p class="target2">6</p>
</div>
</body>
<script type="text/javascript">
$(function () {
//1. .replaceAll('目标元素') //替代所有的标签
$('我是替代者
').replaceAll($('p'));
//2. .replaceWith('元素') //替换元素
$('p').replaceWith('我是替换的标签 ');
})
</script>
</html>