jquery简单使用_w3school

迈不过友情╰ 2022-10-06 15:57 4阅读 0赞

2021.06.10，我离开了淄博的兆物网络，同学内推到了济南市中区的金证股份，来这里写前端界面。主要是使用jquery+easyUI还有他们内部封装的东西。jquery很久没有用了，利用端午节的时间简单看下吧，顺便做个笔记。

jquery代码
 $(document).ready(function(){
 	$("button").click(function(){
 		$("p").hide();
 		//$("#test").hide();
 		//$(".test").hide()
 		//按钮隐藏 $(this).hide()
 		//$("p.intro") 选取所有 class="intro" 的 元素。
 		//("p#demo") 选取所有 id="demo" 的 元素。
 		//$("[href]") 选取所有带有 href 属性的元素。
 		//$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
 		//$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
 		//css选择器：$("p").css("background-color","red");
 		//$("ul li:first") 每个 <ul> 的第一个 <li> 元素
 		//$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
 		//$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
 		//var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
 		//$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
 		//$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
 		//$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
 		//$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
 		//$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件
 		
 	});
 });
 
 //操作父元素的dom
 $(".ex .hide").click(function(){
 $(this).parents(".ex").hide("slow");
 	//$("p").hide(5000); 5秒后消失
 	//$("p").toggle(); 显示和隐藏都是这一个；
 });
 
 //淡入：逐渐显示 ；fadeOut():淡出，逐渐消失；fadeToggle(3000)：淡入淡出;fadeTo("slow",0.15);淡出到一定比例后停止
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
 
 //点击之后下拉显示：或者是下拉滑动
 $(".panel").slideDown("slow");
 //停止向下滑动
 $("#stop").click(function(){
 $("#panel").stop();
 	//停止所有：$("div").stop(true);
 	//停止但是要在完成的地方停止：$("div").stop(true,true);
 });
 //点击之后上拉消失
 $(".panel").slideUp("slow");
 //下拉显示和上拉消失
 $(".panel").slideToggle("slow");
 //自定义动画，竟然是向右平移250的像素,把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
 $("div").animate({
 	 left:'250px',
 opacity:'0.5',
 height:'150px',
 width:'150px});
 //自定义动画：高度消失和显示
 $("div").animate({
 height:'toggle'
 });
 //自定义动画：四段
 var div=$("div");
 div.animate({height:'300px',opacity:'0.4'},"slow");
 div.animate({width:'300px',opacity:'0.8'},"slow");
 div.animate({height:'100px',opacity:'0.4'},"slow");
 div.animate({width:'100px',opacity:'0.8'},"slow");
 //jquery的方法链接
 $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 
 =====================================================================================
 jquery操作DOM的能力 
 1、获取标签内的文本信息
 alert("Text: " + $("#test").text());
 2、获取标签内的html信息
 alert("HTML: " + $("#test").html());
 3、显示value值
 alert("Value: " + $("#test").val());
 4、获取元素内的属性
 alert($("#w3s").attr("href"));
 5、设置文本，html，value值和属性值
 $("#test1").text("Hello world!");
 $("#test2").html("Hello world!");
 $("#test3").val("Dolly Duck");
 $("#w3s").attr({
 "href" : "http://www.w3school.com.cn/jquery/",
 "title" : "W3School jQuery 教程"
 });
 6、文本和html的回调，设置属性值的回调
 $("#test1").text(function(i,origText){
 return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
 }); 显示的是return的内容
 $("#w3s").attr("href", function(i,origValue){
 return origValue + "/jquery"; 
 });
 7、文本追加方法追加列表项(往前：$("p").prepend("Prepended text. ");)
 $("p").append(" Appended text.");
 $("ol").append("<li>Appended item</li>");
 //通过各种方式追加文本
 function appendText()
 {
 var txt1="Text."; // 以 HTML 创建新元素
 var txt2=$("").text("Text."); // 以 jQuery 创建新元素
 var txt3=document.createElement("p");
 txt3.innerHTML="Text."; // 通过 DOM 来创建文本
 $("body").append(txt1,txt2,txt3); // 追加新元素
 }
 //图片前后追加文本
 $("img").before("Before");
 $("img").after("After");
 function afterText()
 {
 var txt1="I "; // 以 HTML 创建元素
 var txt2=$("").text("love "); // 通过 jQuery 创建元素
 var txt3=document.createElement("big"); // 通过 DOM 创建元素
 txt3.innerHTML="jQuery!";
 $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
 }
 
 8、删除元素
 $("#div1").remove();
 //删除指定内容
 $("p").remove(".italic");
 //清空内容
 $("#div1").empty();
 
 9、jquery给标签添加css样式
 $("h1,h2,p").addClass("blue");
 $("div").addClass("important");
 $("#div1").addClass("important blue");
 //删除css样式
 $("h1,h2,p").removeClass("blue");	
 $("p").css({"background-color":"yellow","font-size":"200%"});
 
 10、jQuery width() 和 height() 方法
 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
 txt+="Width: " + $("#div1").width() + "";
 $("button").click(function(){
 var txt="";
 txt+="Width: " + $("#div1").width() + "";
 txt+="Height: " + $("#div1").height();
 $("#div1").html(txt);
 });
 txt+="Inner width of div: " + $("#div1").innerWidth() + "";
 txt+="Inner height of div: " + $("#div1").innerHeight();
 txt+="Outer width of div: " + $("#div1").outerWidth() + "";
 txt+="Outer height of div: " + $("#div1").outerHeight();
 outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。
 outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。
 xt+="Document width/height: " + $(document).width();
 txt+="x" + $(document).height() + "\n";
 txt+="Window width/height: " + $(window).width();
 txt+="x" + $(window).height();
 调整div的尺寸
 $("#div1").width(320).height(320);
 
 11、jquery遍历dom
 $("span").parent().css({"color":"red","border":"2px solid red"}); 获取父元素
 $("span").parents().css({"color":"red","border":"2px solid red"}); 获取所有祖先元素
 $("span").parents("ul").css({"color":"red","border":"2px solid red"});获取指定父元素
 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});//获取两个级别之间的父元素 span和div之间的
 
 12、获取后代元素
 $("div").children().css({"color":"red","border":"2px solid red"}); //获取每个 <div> 元素的所有直接子元素：
 $("div").children("p.1").css({"color":"red","border":"2px solid red"}); //获取后代p标签class=1的后代元素
 $("div").find("span").css({"color":"red","border":"2px solid red"}); //获取指定元素
 $("div").find("*").css({"color":"red","border":"2px solid red"});//返回所有后代
 
 13、jquery获取同级元素
 $("h2").siblings().css({"color":"red","border":"2px solid red"});//获取同级元素
 $("h2").siblings("p").css({"color":"red","border":"2px solid red"}); //返回所有的同级p元素
 $("h2").next().css({"color":"red","border":"2px solid red"});//返回下一个同级元素
 $("h2").nextAll().css({"color":"red","border":"2px solid red"});//返回后边的所有同级元素
 $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});//返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
 
 14、jquery元素过滤
 $("div p").first().css("background-color","yellow"); //选取首个 <div> 元素内部的第一个 元素：
 $("p").eq(1).css("background-color","yellow");返回被选元素中带有指定索引号的元素。
 $("p").filter(".intro").css("background-color","yellow");返回带有类名 "intro" 的所有 元素：
 $("p").not(".intro").css("background-color","yellow"); //返回不带有类名 "intro" 的所有 元素：
 
 15、ajax请求
 $("button").click(function(){
 $.get("demo_test.asp",function(data,status){
 alert("Data: " + data + "\nStatus: " + status);
 });
 });
 $("button").click(function(){
 $.post("demo_test_post.asp",
 {
 name:"Donald Duck",
 city:"Duckburg"
 },
 function(data,status){
 alert("Data: " + data + "\nStatus: " + status);
 });
 });