4、jquery

最新推荐文章于 2023-08-10 14:36:07 发布

隆隆不会敲代码

最新推荐文章于 2023-08-10 14:36:07 发布

阅读量78

点赞数

分类专栏： JavaWeb基础文章标签： jquery dom

本文链接：https://blog.csdn.net/qq_41207136/article/details/107465404

版权

JavaWeb基础专栏收录该内容

19 篇文章 0 订阅

订阅专栏

jQuery

jQuery:是一套跨浏览器的JavaScript库
优点

极大简化了js开发人员遍历html文档

操作dom

简化处理时间

简化处理时间

简化执行动画

开发Ajax

链式操作

隐式迭代

3.jQuery的使用

//首先引入jquery库
<script type="text/javascript" src="路径"></script>
<script type="text/javascript">
	//在这里开始写 
    //$();调用$方法，这叫做jquery的核心函数，相当于window.οnlοad=function(){}
    //为$()方法传入一个function(){}作为参数
    $(function(){
        //使用$()查找相对应的元素，使用click()来半丁点击响应函数，把单机响应的函数作为 			//click()参数传入
        $("#id").click(function(){
            alert("helloworld");
        })
    });
</script>

$()的本质

在jquery定义中，$ == jQuery，  $本质是一个方法
  $(function(){
        //使用$()查找相对应的元素，使用click()来半丁点击响应函数，把单机响应的函数作为 			//click()参数传入
        $("#id").click(function(){
            alert("helloworld");
        })
    });
可以写成
 jQuery(function(){
        //使用 jQuery()查找相对应的元素，使用click()来半丁点击响应函数，把单机响应的函数作为 		//click()参数传入
        jQuery("#id").click(function(){
            alert("helloworld");
        })
    });

jQuery的核心函数

传入参数为【函数时】，如$(function(){})，则文档加载完成后执行此方法 window.onload
$(function(){
	alert("hello");
});
传入参数为【HTML字符串时】，如$(“
html
”)，根据字符串创建元素节点
$(function(){
	$("<li>shouji</li>").appendTo("#father");
});
...
<ul id="parent">
	<li>相机</li>
</ul>
传入参数为【选择器字符串】时，$("#id")，根据选择器查找出元素节点对象
$(function(){
	$("#aid").click(function(){
		alert("");
	});
});
...
<a id="aid" href="#">#表示在本页面跳转</a>
传入参数为【DOM对象】时，$(this)，将dom对象包装为jQuery对象返回
//dom对象：使用原生的js查找或者创建的元素
//jquery对象：使用jQuery查找到或者包装了的元素
//dom对象-jQuery对象 不能相互操作彼此的方法
//要相互操作彼此的方法需要转化
//1.dom->jQuery
var pEle=document.getElementById("p1"); //dom对象
$(pEle).click(function(){ //jQuery对象
	alert("你好");
});
//2.jQuery->dom
var pEle=$("#p1");//jQuery对象用数组存dom对象
var pe=pEle[0];
alert(pe.id);

$("p");//找到所有元素p的dom对象，并存在该jQuery数组中
...
<p id="p1"></p>
DOM对象转换成jQuery对象才能调用其方法

基本选择器、层级选择器

基本的选择器

//我们把选择器字符传入核心函数$(),就会返回要查找的元素
//#id:根据id 选择出元素 $("#id");
//element:根据元素名选出元素 $("div") 
//.class:根据元素的类的值选出元素 $(".class")
//* :选出所有元素 $("*")
//selector1,seletor2...:把各个选择器选出的元素合并起来 $("#id",".class")

层级选择器

//ancestor descendant:在给定的祖先元素下匹配所有的后代元素 
//parent>child:在给定父元素下匹配所有子元素
//previous+next:匹配所有紧接在previous后的next元素
//pre~siblings:匹配pre元素之后的所有siblings元素

基本过滤选择器

//:first:获取第一个元素,如果不加标签名，如直接加:first,则默认取文档的第一个元素，即html标签
$("div:first").css("color","red");
//:last:获取最后一个
$("div:last").css("","")
//:not(selector):除了selector之外的元素
$("div:not(.class)").css("","") //选择class不为class的标签
//:even:选择索引为偶数的元素
$("div:even").css("","")
//:odd:选择索引为奇数的元素
$("div:odd").css("","")
//:eq(index):选择索引等于index的元素
$("div:eq(3)").css("","")//索引值为3的元素
//:gt(index):选择索引大于index的元素
$("div:gt(3)").css("","")//索引值大于3
//:lt(index):选择索引小于index的元素
$("div:lt(3)").css("","")//索引值小于3
//:header:选中所有标题标签
$("div:head").css("","") //选中所有标题元素，如h1,h2,h3
//:animated:选中所有执行动画的元素
$("div:animated").css("","") //选中当前在执行动画的元素

内容过滤器

//:contains(text) 选择包含text文本的元素
//:empty 选择空元素，即没有子节点的元素，子节点包括文本节点
//:has(selector) 匹配有selector选择器的元素 
//:parent 匹配含有子元素或文本元素的元素

可见性选择器

//:hidden 选择不可见的元素，如display设置为none的元素
//:visible 选择可见的元素
//attr方法 
$("input:hidden").attr("value")//只有属性名，则返回属性值，而如果有属性名和属性值，则给该属性重置值

属性过滤选择器

//[attribute] 查找具有属性attribute的元素
$("div[id]")  查找具有id属性的div
//[attribute=value] 查找属性=属性值的元素
//[attribute!=value] 查找属性!=属性值的元素
//[attribute^=value] 查找属性的value值以value开头的元素
//[attribute$=value] 查找属性的value值以value结尾的元素
//[attribute*=value] 查找属性的value值包含value的元素
//[attribute][attribute1]... 同时满足这些属性的元素

子元素过滤选择器

//:nth-child 选择第几个子元素 $("$ul li:nth-child(2)")
//:first-child 选择第一个子元素
//:last-child 选择最后一个子元素
//:only-child 选出只有一个子元素的元素，返回他的子元素

表单选择器

//要在表单中定义才会被选择
//input        选择所有的input框
//:text         选择所有的text框
//:password		选择所有的password框
//:radio		选择所有的radio框
//:checkbox		选择所有的checkbox框
//:submit		选择所有的submit框
//:image		选择所有的image框
//:reset		选择所有的reset框
//:button		选择所有的button框
//:file			选择所有的文件框
//:hidden		选择所有的隐藏框

表单对象属性

//:enabled 		可用的
//:disabled 	不可用的
//:checked		选择的，checkbox或者单选按钮的选择 复选框，单选框等，				   不包括select中的option
//:selected		选择的，下拉列表的选择 匹配所有选中的option元素
//隐式迭代遍历
$(":selected").each(function(){
	alert(this);//this指当前迭代到的对象
});

筛选函数

//eq(index||-index):index为正数，从零开始往下找，index为负数，从-1,即倒数第一个，-2为倒数第二个，以此类推
$("div").eq(3)//选取div元素索引为3的对象，即第四个div
//first():选取第一个元素
$("div").first()
//last():选取最后一个元素
$("div").last()
//filter():筛选出指定表达式的集合,传入选择器字符串
$("div").filter(":even");//选择索引为偶数的div元素
//is():判断是否符合指定的选择器，传入选择器字符串
$("#two").is("#one") //判断是否为id为one的元素，返回false
//has():选择包含选择器的元素
$("div").has(".mini")//选出包含mini的div
//not():选择元素中不包含指定选择器的元素
$("div").not(".one")//选出class不为one的div
//children():选出所有的子元素,如果不传选择器，那么返回所有子元素，若加子元素，则返回包含选择器的子元素
$(“body”).children(".one")//选出class为one的子元素
//find():若无选择器，则选出元素的所有后代元素，若有则返回带有选择器的后代元素
$("body").find()
//next():不加选择器，选出下一个兄弟元素，若加入选择器，则选择符合选择器要求的第一个兄弟
$("#id").next("div") //选出id的下一个div
//nextAll():选择出元素后面的所有元素
$("#one").nextAll("span")//选出id为one元素后面的所有为span的元素
//nextUntil():匹配到某元素之间的所有元素
$("#one").nextUntil("span")//匹配从id one开始直到span之间的所有元素
//parent():选择元素的父元素
$("#one").parent();
//prev():选择该元素的前一个元素
$("#one").prev("div")//返回id为one的前一个div元素
//prevAll():选出前面的所有元素
$("#one").prevAll("div")//选出id为one的前面的所有div元素
//prevUntil(exp):找到前面的所有兄弟元素直到exp为止
$("span").prevUntil("#id")//从最后一个span开始往前找，直到id元素
//siblings():找到所有兄弟元素
$("#one").siblings()//返回所有兄弟元素，包括前面的和后面的，不包括自己
//add():合并多个选择器的结果
$("span").add("#two").add(".one").add(".mini")//选出满足add选择器的所有元素，包括span本身
//andSelf():包括自己
$("#one").children("#.mini").andSelf()//返回除了子元素还有其本身
//end():回到上一步状态
$("#one").children("#.mini").andSelf().end()//返回到children("#.mini")状态
$("#one").children("#.mini").andSelf().end().end()//返回到$("#one")状态

//补充:nth-children:只在子元素找元素
//eq():是在所有后代元素中找元素

dom属性操作

//html(): innerHTML 获取到HTML代码段
1.如果不传递参数，则是获取元素里面的html代码
2.如果传入值-代表将html代码替换

//text():只获取文本
1.不加参数，则返回text值
2.加参数，则重新设置text值

//val():获取标签的value值
1.不加参数，则返回value值
2.加参数，则重新设置value值
//this代表当前被操作的对象，如按钮点击对象，是dom对象，需要加$()转换
//attr("")
1.传入一个参数，获取这个参数的值
2.传入两个参数为前面的属性赋值为后面的值
//prop() 推荐使用，跟attr类似，但更优
1.不加参数，获取属性值
2.加参数，设置属性值
//若在标签中没有写出属性，用prop()能返回true或false，但attr会是undefined
//而在设置的时候两者都能正常设置
//标签固定支持的属性叫原生属性 推荐用prop
//标签也可以自定义属性 推荐attr
<a abc="abc"></a>

dom增删改

插入

//父节点.append(子节点)，追加到最后边

$("#parent").append(“

广州
”);

//$(子节点).appendTo(父节点)把子节点添加到父节点中

$(" < l i > 广州 < / l i > ") . a p p e n d T o ($ ("#parent"));

//$父节点.prepend(子节点) 在父节点里面插入一个子节点，追加到前面

$("#parent").prepend("#son");

// prependTo() 子节点.prependTo(父节点) 把子节点添加到父节点前面

$("#son").prependTo("#son");

//a.before(b) a之前插入b

$("#a").before("#b")

//a.insertBefore(b) 把a插入到b的前面

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").insertBefor\dots$ ("#b"));

//a.after(b) a之后插入b

$("#a").after("#b")

//a.insertAfter(b) 把a插入到b的前面

$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲a").insertAfter\dots$ ("#b"));

替换节点

//a.replaceWith(b) 把a用b替换

$("#a").replaceWith("#b");

//a.replaceAll(b) a替换所有的b

$("#a").replaceAll("#b");

删除节点

//$("#a").remove() 删掉a节点

//$("#a").remove(".b") 把符合.b的a删除

//$("#a").empty() 掏空a节点

//$("#a").html() 读取a 节点里面的所有html代码

//$("#a").html (“

a
”) 设置a 节点里面的所有html代码

节点包裹

//$(a).wrap(b) 用b 把每个a 包裹起来

$(“ul”).wrap(“a”) span把ul包裹起来

//$(a).wrapAll(b) 使用b把所有a包裹起来，会改变位置，即把a移动到b里面

$(“ul”).wrapAll(“a”);

//$(a).wrapInner(b) a里面的东西被b包围

$(“li”).wrapInner("");

//$(a).unwrap() a解除所有包裹

$(“li”).unwrap();

css操作

<!--一个元素可以有多个class-->
var $divEle=$("div:first");//第一个div
//addClass() 向被选元素添加一个或多个类
//添加单个class 传入单个class
//添加多个class 不同class用空格隔开
$divEle.addClass("firstclass secondclass");

//removeClass() 从备选元素中删除一个或多个类
$divEle.removeClass("firstclass secondclass");

//hasClass() 检查被选元素是否包含指定的一个或多个class
$divEle.hasClass("firstclass secondclass");

//toggleClass() 对被选元素进行添加/删除类的切换操作
//切换class值，如果有class值-》没有 如果没有-》有
$divEle.toggleClass("firstclass secondclass");

//css() -设置或返回样式属性
$divEle.css("background-color")

//height() 传值设置高度，不传值获取高度
$divEle.height() ;

//width() 传值设置宽度，不传值获取宽度
$divEle.width();

//offset() 返回第一个匹配元素相对于文档的位置
console.log($divEle.offset())//在浏览器控制台中获取信息的函数，会返回top和left的值
//设置
var obj={top:500,left:10} //js对象
$divEle.offset(obj)

事件

$(function(){
//1.通常绑定时间的方式
	$(".head").click(function(){
	$(".content:eq(0)").toggle();//切换显示或隐藏
//2.使用bind()方法
	$(".head").bind("clcik",function(){
	$(".content:eq(0)").toggle();//切换显示或隐藏
//3.合并”鼠标移入"和”鼠标移出“
	$(".head").mouseover(function(){//鼠标移入
		$(".content:eq(0)").show();
	});
		$(".head").mouseout(function(){//鼠标移出
		$(".content:eq(0)").hide();
	});
	或：
	$(".head").mouseover(function(){
		$(".content:eq(0)").show();
	}).mouseout(function(){
		$(".content:eq(0)").hide();
	});
	或：//多个事件用空格隔开
	$(".head").bind("mouseover mouseout",function(){	$(".content:eq(0)").toggle();//切换显示或隐藏
	});
//4.只绑定一次
	$(".head").one("click",function(){
		$(".content:eq(0)").toggle();//切换显示或隐藏
	});
//5.动态添加元素后也可以对元素操作选用live函数，与bind方法不同的是，live只能绑定一次事件，销毁用die函数
	$(".head").live("click",function(){
		$(".content:eq(0)").toggle();//切换显示或隐藏
	});
//6.解除绑定unbind() ,bind的反向操作
	$(".head").unbind("")
 	$(".head").unbind("mouseover")

12.事件冒泡

//事件从内层到外层的传导，传到document对象就结束了
//以下示例点击span会弹出框框的顺序为：span->div->body
$(function(){
	$("span").click(function(){
	alert("我是span");
	});
	$("div").click(function(){
	alert("我是div");
	});
	$("body").click(function(){
	alert("我是body");
	});
});
...
<body>
	<div>
        <span></span>
    </div>
</body>
//阻止事件向上传导
$(function(){
	$("span").click(function(){
	alert("我是span");
	return false; //点击span后就结束
	});
	$("div").click(function(){
	alert("我是div");
	return false;//点击div后就结束
	});
	$("body").click(function(){
	alert("我是body");
	return false;//点击body后就结束
	});
});

事件对象

//dom的事件对象
var areaDiv=document.getElementById("areDiv");
var showMsg=document.getElementById("showMsg");
areaDiv.onmouseover=function(event){//随便取个参数名showMsg.innerHTML="X:"+event.pageX+"Y:"+event.pageY
}
//jquery对象
$(function(){
	$("#areDiv").mousemove(function(event){
		$("showMsg").text("eventType"+event.type);//获取对象的值，可以根据值做相应的操作
	});
	$("#areDiv").bind("click mousemove",function(event){
	//1.当点击的时候弹出showMsg的文本值
		if("click"==event.type){
			alert("");
		}
	//2.当mousemove的时候showMsg里面显示详细信息
		if("click"==event.type){
	$("showMsg").text("eventType"+event.type);//
		}
	})
});

14.动画

//显示show()
$("#btn").click(function(){
	(".div").show("fast");//默认既展开又淡入,什么都不传直接展示
});
$("#btn").click(function(){
	(".div").show("fast",function(){
	alert();//动画执行完成以后执行这个回调方法
});//默认既展开又淡入,什么都不传直接展示

//隐藏hide()
$("#btn").click(function(){
	(".div").hide(1000);
});
//切换 toggle()
$("#btn").click(function(){
	(".div").toggle(1000);
});
//滑动展开slideDown()
$("#btn").click(function(){
	(".div").slideDown(1000);
});
//滑动合并slideUp()
$("#btn").click(function(){
	(".div").slideUp(1000);
});
//滑动slideToggle()
$("#btn").click(function(){
	(".div").slideToggle(1000);
});
//淡入fadeIn()
$("#btn").click(function(){
	(".div").fadeIn(1000);
});
//淡出fadeOut()
$("#btn").click(function(){
	(".div").fadeOut(1000);
});
//淡化到fadeTo()
$("#btn").click(function(){
	(".div").fadeTo("slow",0.5);//缓慢淡化到透明度0.5
});
//淡化切换fadeToggle()
$("#btn").click(function(){
	(".div").fadeToggle("slow");
});
//自定义动画
$("#btn").click(function(){
//传入元素的最终样式 最终变为宽500 高700 背景色红色 边框10px solid;
	var param={width:"500px",height:"700px",backgroundColor:"red",border:"10px solid green"}
	(".div").animate(param,2000);//在2000ms内变成param形式
});

隆隆不会敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4、jquery

jQueryjQuery:是一套跨浏览器的JavaScript库优点极大简化了js开发人员遍历html文档操作dom简化处理时间简化处理时间简化执行动画开发Ajax链式操作隐式迭代3.jQuery的使用//首先引入jquery库<script type="text/javascript" src="路径"></script><script type="text/javascript"> //在这
复制链接

扫一扫