Jquery笔记

 图片来自：3小时带你玩转jQuery+Ajax（前端开发-从入门到精通）

JQuery对象

引入

<script src="js/jquery-3.6.1.js" type="text/javascript" charset="utf-8></script>

DOM对象转Jquery对象

//获取Dom对象
var domDiv =document.getElementById('mydiv');
//转换
mydiv = $(domDiv)

Jquery对象转Dom对象 

//第一种：获取包装集中指定下标的元素，将jquery对象转换成dom对象
var dom = jqueryDiv[0];
//第二种：获取jQuery对象
var jqueryDiv = jquery('#mydiv')

---

JQuery选择器

笔记地址

JQuery Dom操作

元素	创建元素	$("内容")		var p = "<p>我是个p标签</p>“ console.log($(p))
	添加元素	指定元素.prepend(内容）		在指定元素前追加内容 var span = "<span>小奶狗</span> $(”.green").prepend(span); 在id为green的元素前追加名为span的元素
		$(内容).prependTo(指定元素)		把内容追加到指定元素最前面 $(span).prependTo($(".green")); 把名为span的元素追加到id为green的元素的最前面
		指定元素.append(内容）		在指定元素后追加内容 $(”.green").append(span);
		$(内容).appendTo(指定元素)		$(span).appendTo($(".green"));
		before()		在元素前插入指定的元素或内容 $(selector).before(content) $("blue").before(sp1)
		after()		$(selector).after(content) 在元素后插入指定的元素或内容 $(”blue“).after(sp2)
	删除元素	remove()		$(".green").remove(); 整个标签和内容一起删
		empty()		$(".green").emptye(); 清空所选元素的内容
	遍历元素	each()		$("selector").each(function(index,element)) 遍历元素 function为遍历时的回调函数 index为遍历元素的序列号，从0开始 element是当前的元素,此时是dom元素， 如果想使用要转为jquery元素 index和element可省略 $(".green").each(function(index,element){         console.log(index);         console.log(element);         coonsole.log(this);         coonsole.log($(this)); })
元素属性	属性分类	固有属性		id、name、class、style
		返回值是boolean的属性		checked、selected、disabled
		自定义属性
	获取属性	prop(”属性名“)		类型是boolean的用prop获取 具有true和false两个属性的属性值
		attr("属性名")		其他全部用这个 有则返回具体值，没有返回undefined
	设置属性	attr("属性名"，"属性值")
		prop(“属性名”,"属性值")
	移除属性	removeAttr("属性名")
元素样式	获取样式	attr("class")		$("#btn).attr("class") 获取id为btn的class样式
	设置样式	attr("class","样式名")		原本的样式会被覆盖
	增加样式	addClass("类名")		添加类名 （原本的样式保留，如果出现相同的样式，以后定义的为准）
		css("样式名","样式值") css({         '样式名1':'样式值1',         '样式名2':'样式值2', })		添加具体样式 （行内样式，优先级高） $("#text").css("font-size","40px")
	切换类	toggleClass(“类名”)		$(this).toggleClass(“类名”)
	移除样式	removeClass("类名")		移除样式名称 $("#text").removeClass(font-size")
元素内容	获取内容	html()		获取html内容
		text()		获取文本内容，不含html
		val()   表单元素		获取元素的value值
	设置内容	html("内容")		$("#html").html("<h2>上海</h2>"） $("#html").html("上海"）
		text(“内容”)		$("#text").html("上海"）
		val("值")  表单元素		设置元素的value的值

JQuery 事件

事件类型	blur、focusin、focusout、load、resize、scroll、unload、 click、dblclick、mousedown、mouseup、mousemove、 mouseover、mouseout、mouseenter、mouseleave、 change、select、submit、keydown、keypress、keyup、 error
预加载事件	ready()	$(document).ready(function() { }) ;
		简写： $(function(){ }); 可以写多个，按顺序执行
事件绑定	blind()	//单个绑定 $("#test").bind(“click",function(){ }) //直接绑定 $("元素").事件名(函数(){ }); $("#test").click(function(){ });
		//多个 $("#test").click(function(){         console.log("被点击了"); }).mouseout(function(){         console.log("移开了") });

JQuery Ajax

Ajax：异步无刷新技术

异步：无需等待服务器返回结果就能去做别的事情

无刷新：我们做了一些操作以后页面不会刷新，依然留在当前位置

$ajax	$.ajax({})	POST请求需要服务器的支持，没有服务器会报500的异常
$get	$.get();	$.get("请求地址"，"请求参数",function(形参){}) $.get("js/data.json"，{},function(data){         consloe.log(data) })；
$post	$.post();	$.post("请求地址"，"请求参数",function(形参){})；
$getJSON	$.getJSON();	$.getJSON("请求地址"，"请求参数",function(形参){})； 注：要求返回的数据必须是JSON格式