JQuery基础笔记

最新推荐文章于 2024-05-25 23:12:43 发布

红豌豆

最新推荐文章于 2024-05-25 23:12:43 发布

阅读量777

点赞数

分类专栏：前端 jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_64353584/article/details/123586884

版权

这篇博客详细介绍了jQuery的基础知识，包括如何通过id获取元素、使用load事件、DOM对象与jQuery对象之间的转换、选择器的应用、样式操作、动画效果以及事件绑定等核心功能，是初学者入门jQuery的好资料。

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

jQuery 框架

 
//JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码
//jQuery是JavaScript框架库中的一种
//jQuery的好处:写的少,做的多,链式编程,隐式迭代等...
//jQuery可以解决js兼容的问题

通过id获取元素

  window.onload=function () {
   
	   document.getElementById("btn").onclick=function () {
   
		   //获取div根据id的方式来获取
		   var divObj=document.getElementById("dv");
		   divObj.style.width="200px";
		   divObj.style.height="100px";
		   divObj.style.backgroundColor="red";
	   } ;
   };

jQuery 通过id获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-1.12.2.js"></script>
		<script>
		// 页面加载后的事件
		     $(function(){
    
				 $('#btn').click(function(){
    
					 $('#dv').css({
    'width':"200px",'height':'200px','backgroundColor':'red'});
				 });
			 });
		</script>
	</head>
	<body>
		<input type="button" value="按钮" id="btn" />
		<div id="dv"></div>
	</body>
</html>

  /*
      *
      * DOM中的顶级对象:docuemnt---页面中的顶级对象
      * docuemnt点出来的是DOM中的属性和方法
      * BOM中的顶级对象:window----浏览器中的顶级对象
      * window点出来的是浏览器中的属性和方法
      * window.document
      * jQuery的顶级对象:jQuery---$
      * $点出来的是jQuery中的方法
      *

加载事件 load

//页面加载事件  只能出现一次
		window.onload=function(){
   
			console.log('一天又开始帅了');
		}
		window.onload=function(){
   
			console.log('一天天又开始帅了');
		}

jquery加载事件 load

	<script>
		//jQuery的代码---和DOM中的window.onload事件是相同的
		$(window).load(function(){
   
			console.log('今天又开始帅了');
		});
		$(window).load(function(){
   
			console.log('哈哈，今天又开始帅了');
		});
		</script>

页面基本标签加载完毕后可以触发

//第二种页面加载的事件的写法---都是方法了
		//页面中的基本的标签加载完毕后就可以触发了
		$(document).ready(function(){
   
			console.log('我天生就hi是这么的帅气');
		});
		$(document).ready(function(){
   
			console.log('我天生就是这么的帅气');
		});

内容标签加载后触发

//页面中基本的标签加载后就执行
		jQuery(function(){
   
			console.log('一天天的装逼组合');
		});
		jQuery(function(){
   
			console.log('是呀，一天天的装逼组合');
		});
		jQuery(function(){
   
			console.log('最帅气的我一天天的装逼组合');
		});

获取元素对象

// dom操作修改按钮背景颜色
		window.onload=function(){
   
			var objbtn = document.getElementById('btn'); //获取元素对象
			objbtn.onclick=function(){
   
				this.style.backgroundColor='red';
			}
		}

DOM对象转jQuery对象,只需要把DOM对象放在$(dom对象)—>jQuery对象

	$('#btn').click(function(){
   
				$(this).css('backgroundColor','red');
			})

把jQuery对象转DOM对象两种方式:

  	* 1.$(btnObj).get(0);---->DOM对象
  	* 2.$(btnObj)[0];----->DOM对象

$(btnobj).get(0)

var objbtn = document.getElementById('btn'); //获取元素对象
			var btnobj = $(objbtn).get(0);  //dom对象
			btnobj.onclick=function(){
   
				this.style.backgroundColor='green';
			};

$(btnobj)[0]

	var btnobj = $(objbtn)[0];
			btnobj.onclick=function(){
   
				this.style.backgroundColor='yellow';
			}

实例

	<script>
		$(function(){
    //相当于document.onload
			//$("#btn");---->jQuery对象
			// $('#btn').click(function(){
   
			// 	 $(this).css('backgroundColor','red');
			// });
			// $("#btn").οnclick=function(){ //无法执行 因为jqery中根本没有onclick
			// 	this.style.backgroundColor='red';
			// }
			$('#btn')[0].onclick=function(){
   
				this.style.backgroundColor='red';
			}
		})
		</script>

jquery

$(’#btn1’) 根据id获取元素对象
$(‘body’) 根据标签获取元素
$(’.btn’) 根据类名获取元素
val() 获取元素的valuie
css() 获取设置元素的style样式
text() 获取设置dom中的innerHTML或者textContent
$(“p.cls”) 标签加类选择器
$(“p,span,li,div”) 多条件选择器
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML

选择器

 /*
        *
        * DOM中获取元素的方式:
        * document.getElementById("id的值");根据id获取元素,一个
        * document.getElementsByTagName("标签的名字");根据标签的名字获取元素,多个
        * document.getElementsByName("name属性的值");根据name属性的值获取元素,多个
        * document.getElementsByClassName("类样式的名字");根据的是类样式的名字来获取元素,多个
        *
        * */
        /*
        *
        * jQuery获取元素的方式:通过各种选择器来获取元素
        * 1.根据id来获取--->id选择器  ---->$("#id的值");一个
        * 2.根据标签的名字来获取---标签选择器--->$("标签的名字");多个
        * 3.根据类样式的名字获取--->类选择器--->$(".类样式的名字");多个
        *
        *
        * */

.css()

$(’.dv’).css({‘width’:‘300px’,‘height’:‘300px’,‘backgroundColor’:‘yellow’});
$(’.dv’).css(‘backgroundColor’,‘red’);

层次选择器

//获取的是div中所有的p标签元素
//$("#dv p").css("b

最低0.47元/天解锁文章

红豌豆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery基础笔记

jQuery 框架 //JavaScript框架库:就是一个普通的js文件,封装了很多的函数,封装了很多兼容的代码//jQuery是JavaScript框架库中的一种//jQuery的好处:写的少,做的多,链式编程,隐式迭代等...//jQuery可以解决js兼容的问题通过id获取元素 window.onload=function () { document.getElementById("btn").onclick=function () { //获取div根据id的方
复制链接

扫一扫