Jquery 的几种常用方法，小白福音！！！！！-CSDN博客

本文链接：https://blog.csdn.net/qq_48935847/article/details/135771784

本文介绍了如何使用jQuery进行DOM操作，包括隐藏元素、转换对象类型、选择器应用、文本值的取值与赋值、图片属性设置、子元素添加、元素删除、样式修改、动画效果（隐藏/显示和淡入淡出）以及基本的本地存储功能。

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

jQuery

function yincang(){
			$("#d1").hide(5000);
		}

调用jQuery 的hide函数，把背景色给隐藏，hide(5000)有五秒中的动画效果；

普通对象与jquery对象的相互转换

var jq = $("#d1");
			 var d1 = document.getElementById("d1");
			 //普通对象转成jQuery对象
			 var x = $(d1);//x就是jQuery对象
			 //jquery转成普通dom对象
			 var y = jq[0];

选择器

$(function(){
			$("#d").text("长春");//id选择器
			$(".c").text("香肠");//class选择器
			$("div").text("好吃");//标签选择器
             $("input[type = text]").val("长春");//元素选择器，只有表单元素采用.val。其余都用text。
    $("p:first-child").text("西横石");//把p标签的父标签的p标签的第一个子元素
		})

取值or赋值

//非表单元素
			//赋文本值，不会解析成html
			$("#d").text("<span>偿还</span>");
			//赋文本值，解析成html
			$("#k").html("<span>偿还</span>");
			//取文本值
			console.info($("#d").text());
			//取文本值，包括html标签
			console.info($("#k").html())
//表单元素
			//赋值
			$("input").val("李雷");
			console.info($("input").val());

设置图片属性的两种方法

方法1：
let img = $("<img src = 'img/春.jpg' alt = '浑天' style = 'width = 100px' />");
			$("body").append(img);
方法2：			
			let img = $("<img/>");
			img.attr("src"," img/春.jpg");
			img.attr("alt","春天");
			img.css("height","200px");
			$("body").append(img);

向元素中添加子元素

let pa = $("<p>长存长春</p>");
			let pb = $("<p>加油加油</p>");
			let d1 = $("#d1");
			d1.append(pb);
			d1.prepend(pa);

删除元素

let d1 = $("#d1");
			console.info(d1);
			d1.remove();//删除自身及其所有子元素
			d1.empty();//删除所有子元素
			d1.unwrap();//删除他的父元素，保留自身及其兄弟元素

修改样式

// $("div").toggleClass("c2");	
			$("div").css({"background-color" :"green","width":"400px"});

隐藏\展示动画

$(function(){
		 	$("div").on("click",function(){
				$(this).hide(1000);
				})
				$("button").on('click',function(){
					$("div").show(5000);
				})
				});

淡入淡出

//淡入淡出
			$(function() {
				$("button").on('click', function() {
					$("div").fadeOut(5000);
				})
				$("button").on('click', function() {
					$("div").fadeIn(5000);
				})
			});

本地存储

$(function(){
				$("#save").on("click",function(){
					let username = $("#username").val();
					localStorage.setItem("username",username);
				})
				$("#read").on("click",function(){
					
				let username = localStorage.getItem("username");
				alert(username);
				})
			})