jquery简单使用_w3school

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> 元素。
		//("p#demo") 选取所有 id="demo" 的 <p> 元素。
		//$("[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("<b>Hello world!</b>");
$("#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("<b>Prepended text</b>. ");)
$("p").append(" <b>Appended text</b>.");
$("ol").append("<li>Appended item</li>");
//通过各种方式追加文本
function appendText()
{
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
//图片前后追加文本
$("img").before("<b>Before</b>");
$("img").after("<i>After</i>");
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建元素
var txt2=$("<i></i>").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() + "</br>";
$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});
txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height of div: " + $("#div1").innerHeight();
txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height of div: " + $("#div1").outerHeight();
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
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> 元素：
$("p").eq(1).css("background-color","yellow");返回被选元素中带有指定索引号的元素。
$("p").filter(".intro").css("background-color","yellow");返回带有类名 "intro" 的所有 <p> 元素：
$("p").not(".intro").css("background-color","yellow"); //返回不带有类名 "intro" 的所有 <p> 元素：

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);
  });
});