jquery.js 学习

最新推荐文章于 2021-10-28 22:22:12 发布

半浮名

最新推荐文章于 2021-10-28 22:22:12 发布

阅读量1k

点赞数 2

分类专栏：笔记 jqurey 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_51813155/article/details/121001918

版权

笔记同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

jqurey

1 篇文章 0 订阅

订阅专栏

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>

效果图:
在这里插入图片描述
点击第一个按钮后

半浮名

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
jquery.js 学习

jquery.js 学习1.我们为什么学习jquery?2.绑定元素语法:1.我们为什么学习jquery?因为:jquery是对原生Js的封装，里面有很多有用的函数,不用写长的代码，一个函数搞定如:隐藏元素:需要我们加 style:display:none,在js中点击修改,而jquery:直接: $(’#元素id’).hide();jqurey:有许多API 函数2.绑定元素语法:$(’#we’).hide(); //获取元素的方式: 通过获取id;
复制链接

扫一扫