JQUERY框架介绍

最新推荐文章于 2024-03-18 04:00:16 发布

qq_40707269

最新推荐文章于 2024-03-18 04:00:16 发布

阅读量291

点赞数

分类专栏： HTMLCSS

本文链接：https://blog.csdn.net/qq_40707269/article/details/111136404

版权

JQUERY是一个方便的JS库，提供了丰富的API用于操作DOM、事件绑定和动画效果。它与原生JS对象有所不同，能简化DOM操作。JQUERY的选择器、事件处理和方法如html(), text(), val()各有特点，支持多种选择器类型如基本、层级和属性选择器。此外，还介绍了append()、prepend()等DOM操作以及show()、hide()、toggle()等动画效果，以及事件绑定的方法。" 112599943,6682470,React组件API详解,"['React', '前端开发', '组件状态', '组件更新']

摘要由CSDN通过智能技术生成

1.就是一个js文件，里面封装好了很多方法作为工具，由着你使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src = "/js/jquery-3.3.1.min.js">

    </script>
</head>

<body>

<div id = "div2"> div2</div>

<div id = "div1">div1 </div>

<script>
    var div = $("#div1");//使用id选择器获取元素对象,JQuery中封装了这样的功能
    alert(div.html());//JQuery中获取标签内容的方法
</script>
</body>
</html>

JQUERY和js对象区别
当使用tag标签获取时候，会获取到一个数组，都可以使用数组使用
但是JQUERY会比较好操作

js对象和JQUERY对象功能不通用，但是可以互相转化
js --> jq : $(js对象)

选择器：
1.筛选具有相似特征对象

基本选择器
1.事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script >
    window.onload = function (){
    
        alert("abc");
    }//绑定函数

    $(function (){
    
        $("#b1").css("background-color","red");//相当于window.
    });
    </script>
</head>

<body>

<input type="text" value="点我" id = "b1">


<script>
$("#b1").click(function (){
    
    alert("acc")
});//通过这钟方式绑定函数

alert("ass");
</script>

</body>
</html>

JQUREY给标签改内容，可以不用遍历
js ->jq对象经常做，因为jq真的好用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">u1s1</div>
<div id="div2">u2s3</div>

<script>
   var divs = document.getElementsByTagName("div");//获取所有div对象，js对象
   alert(divs);
   var $divs = $("div");//放一个标签选择器获取所有标签
   alert($divs);
   //都可以当作数组来使用
   //使用jquery更改标签内容
   $divs.html("acccc");//统一去更改内容

   //js和jq可以相互转换
   //$(js)对象就行了

   
</script>
</body>
</html>

绑定bom时间，使用jquery来绑定事件会更加好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        window.onload = function (){
   
            $("#b1").click(function (){
   
                alert("abc");
            })
        }//在没有jquery时候，是这么写的
        //有了之后
        //jqerydom文档加载完成之后，执行这些代码
        $(function (){
   })//直接这样就代表window

        /*
        window.onload和$()
        区别在于，window.onload只能定义一次，
        定义多了后面的会把前面的覆盖掉
        $()这件事可以定义无数次
         */
    </script>
</head>
<body>
<div id="div1">u1s1</div>
<div id="div2">u2s3</div>
<input type="text" name="" value="点我" id="b1">

<script>
    var b1 = $("#b1");//获取按钮
    b1.click(function (){
   
        alert("我被点击");
    })




</script>
</body>
</html>

基本选择器
1.标签选择器
标签名字
2.类选择器
.类名字
3.并选择器
选择器1 选择器2
4.id选择器
选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="./js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
   
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
   
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
   
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			
			
	 </style>
	<script type="text/javascript">

		// <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		// 		<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		// 		<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		// 		<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		// 		<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		//绑定单机事件
		//script在head里面，所以要选择window.onload入口函数的方式进行绑定
		$(function (){
   
			$("#b1").click(function (){
   // 		<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
				$("#one").css("backgroundColor"

最低0.47元/天解锁文章

qq_40707269

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQUERY框架介绍

1.就是一个js文件，里面封装好了很多方法作为工具，由着你使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery快速入门</title> <script src = "/js/jquery-3.3.1.min.js"> </script></head><
复制链接

扫一扫