jquery.js 学习
1.我们为什么学习jquery?
因为:jquery是对原生Js的封装,里面有很多有用的函数,
不用写长的代码,一个函数搞定
如:隐藏元素:需要我们加 style:display:none,在js中点击
修改,而jquery:直接: $(’#元素id’).hide();
jqurey:有许多API 函数
jquery:可以用$来表示
2.绑定元素语法:
$(’#we’).hide(); //获取元素的方式: 通过获取id; 要加#号
$(’.qqq’).hide(); //通过获取class 的标签 加点
<!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>
</head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<body>
<div id="we">111</div>
<div class="qqq"></div>
<script>
$('#we').hide(); //获取元素的方式: 通过获取id
$('.qqq').hide(); //通过获取class 的标签
</script>
</body>
</html>
结果: 隐藏了元素
3.jqurey:的API
$(’.we’).hide()
$(’.we’).show()
$(’#www’).val() //获取输入框的内容 ,之后可以用判断语句
$(’.qqq’).html() : //设置内部内容:
$(’.qqq’).text(); // 修改文本内容
$(’.qqq’).slideUp(元素); //上滑效果
$(’#iot’).slideDown(); //下滑效果
$(’#iot’).slideToggle() // 上下滑动
等等
<div class="qqq"> 222</div>
//在script学下
$('.qqq').html('<h2>4567</h2>')
变成:
<div class="qqq"> <h2>4567</h2>
</div>
结果:
代码:
<!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>
</head>
<style>
.html{
background-color: pink;
}
.wee{
width: 300px;
height: 300px;
background-color: pink;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<body>
<div id="we">111</div>
<div class="qqq"> 222</div>
<input type="text" id="www">
<button>按钮</button>
<button id="ne">按钮2</button>
<div id="iot" class="wee"> 我是说</div>
<script>
$('#we').hide(); //获取元素的方式: 通过获取id
$('.qqq').show(); //通过获取class 的标签
$('#iot').text('我是谁');
$('button').click(function(){
$('#iot').slideUp()
})
$('#ne').click(function(){
$('#iot').slideDown()
})
$('.qqq').html('<h2>4567</h2>')
setInterval(function(){
console.log($('#www').val())
},1000)
function app(){
if($('#www').val()==1111){
alert('输入正确');
}
else{
alert('输入错误!')
}
}
</script>
</body>
</html>
效果图:
点击第一个按钮后