jquery属性
html():获取标签内容
val():获取value值,表单大多数有value
prop()/attr():根据属性名获取属性值,这两个使用一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
alert($('div').html())
$('div').html('<em>我是一个斜体</em>')
$('input').val('hahha')
alert($('input').val())
alert($('img').prop('src'))
$('img').prop({'src':'http://www.xinlang.com/1.jpg'})
})
</script>
</head>
<body>
<div class="box">
hahah <p>我是一个p标签</p>
</div>
<input type="text">
<img src="http:www.baidu.com/1.jpg" alt="">
</body>
</html>
jquery事件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2f1af5e6f12d29dfd8b52664c14511b9.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('input').blur(function(){
console.log('我已经失去焦点啦')
})
$('input').click(function(){
console.log('我又聚焦了啊')
})
$('div').hover(function(){
alert('hover1')
},function(){
alert('hover2')
})
$('div').hover(function(){
alert('hover')
})
})
</script>
<style>
div {
margin: 50px;
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
</head>
<body>
<input type="text">
<div></div>
</body>
</html>
正则
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/142b5bd267c5e5635345721c4a50b6b9.png)
var sTr01='123bu63nj'
var re01=/\d+/
alert(re01.test(sTr01)) //结果是true
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.box').click(function(){
alert('haahhah')
return false
})
$('body').click(function(){
alert('body')
})
$(document).click(function(){
alert('document')
})
})
</script>
<style>
.box {
width: 300px;
height: 300px;
background-color: blue;
}
.mBox {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<div class="mBox"></div>
</div>
</body>
</html>
事件委托
事件委托:就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行响应的操作
事件委托可以极大的减少事件绑定的次数,提高性能
其次可以让新加入的子元素也可以拥有相同的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('ul').delegate('li','click',function(){
$(this).toggleClass('box1')
})
})
</script>
<style>
.box1 {
background: brown;
}
</style>
</head>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
dom 操作
$(selector).append(content)
append():在元素内部添加,后面放入 添加标签
prepend():在元素内部添加,前面放入
after():在元素外部添加,后面放入
before():在元素外部添加,前面放入
删除:
$(selector).remove()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('div').after($('<em>啧啧啧</em>'))
})
</script>
</head>
<body>
<div>
哈哈哈
</div>
</body>
</html>
Todolist
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/445c6695e3902f6ebd9347baa088cd9c.png)
需求:1.点击增加按钮,判断输入框是否输入,未输入则弹出
2.已输入内容,则添加到列表的最后一行
3.右边的按钮点击后按照删除/下移/上移功能进行实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.list_con{
width: 500px;
height: 500px;
line-height: 30px;
margin: 50px;
}
#txt1 {
width: 441px;
}
ul {
width: 500px;
line-height: 30px;
list-style: none;
padding-left: 0px;
}
li {
border-bottom: 1px solid black;
}
ul li span {
}
ul li a{
text-decoration: none;
float: right;
margin-left: 10px;
}
</style>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input=$('#txt1')
var $ul = $('ul')
$('#btn1').click(function(){
var value = $input.val()
$input.val('')
var str = $ul.html() +'<li><span>'+value+'</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>'
if (value ==''){
alert('您未输入内容')
return
}
$ul.html(str)
})
$('.list').delegate('a','click',function(){
if ($(this).prop('class')=='down'){
if ($(this).parent().next().length==0){
alert('已经到底了')
return
}
$(this).parent().next().after($(this).parent())
}else if ($(this).prop('class')=='up'){
if ($(this).parent().prev().length==0){
alert('已经到顶了')
return
}
$(this).parent().prev().before($(this).parent())
}else{
$(this).parent().remove()
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do List</h2>
<input type="text" id="txt1" class="input01">
<input type="button" id="btn1" value="增加">
<ul id="list" class="list">
<li><span>学习html</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>
<li><span>学习css</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>
<li><span>学习js</span><a href="#" class="up">↑</a><a href="#" class="down">↓</a><a href="#">删除</a></li>
</ul>
</div>
</body>
</html>