Jquery基础知识之菜鸟教程

	jquery核心： write less do more
	1.jQuery 语法
	基础语法： $(selector).action();

	2.文档就绪事件 ：文档完全加载完后执行函数
	第一种方式： $(document).ready(function(){});
	第二种方式： $(function(){});

	3.jQuery 选择器
	元素选择器 $("p").hide(); // 所有的p元素隐藏
	#id选择器  $("#test").hide();//id为test的元素隐藏
	.class选择器  $('.test').hide(); // class为test的所有元素隐藏

	$("*") //选取所有元素
	$(this) // 选取当前HTML元素
	$("p .intro") // 选取class 为intro的p元素
	$("ul li:first") //选取第一个ul元素下的第一个li元素
	$('ul li:first-child') //选取每个ul下的第一个li元素
	$('[href]') //选取所有带href属性的元素
	$('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank)
	$('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank)
	$(":button") // 选取所有type=“button”的input和button元素
	$("tr：even") // 选取所有的偶数行
	$("tr:odd") //选取所有的奇数行

	4.jQuery 事件
	事件：页面对不同访问者的响应
	鼠标事件： click    dbclick  mouseenter  mouseleave  hover(悬停事件)
	键盘事件： keypress keydown  keyup       blur
	表单事件： submit   change   focus       unload
	文档窗口事件：load  resize   scroll

	4.1 jQuery 事件方法语法 
	$("p").click(function(){//点击p元素后执行的代码});

	$("p").dblclick(function(){ //双击事件
	  $(this).hide();
	}); 

	$("#p1").mouseenter(function(){ // 鼠标指针穿过元素事件
	  alert("You entered p1!");
	}); 

	$("#p1").mouseleave(function(){// 鼠标指针离开元素事件
	  alert("Bye! You now leave p1!");
	}); 

	$("input").focus(function(){// 元素获得焦点事件
	  $(this).css("background-color","#cccccc");
	});

	$("input").blur(function(){// 元素失去焦点事件
	  $(this).css("background-color","#ffffff");
	}); 

	5.jQuery 效果
	5.1 隐藏和现实HTML元素 ：
	$(selector).hide(speed,callback);
	$(selector).show(speed,callback); 
	例：
	$("button").click(function(){
	  $("p").hide(1000);//1000毫秒，隐藏的速度，1s钟隐藏
	});

	5.2 来回切换隐藏和显示 用 toggle();
	<button>隐藏/显示</button>
	$("button").click(function(){
		$("p").toggle();
	});

6. 淡入淡出 
	$(selector).fadeIn(speed,callback);
	$(selector).fadeOut(speed,callback);
	$(selector).fadeToggle(speed,callback);
	$(selector).fadeTo(speed,opacity,callback);

	  $("button").click(function(){ //三个div逐次出现
		$("#div1").fadeIn();
		$("#div2").fadeIn("slow");
		$("#div3").fadeIn(3000);
	  });

	  $("button").click(function(){ //三个div逐次淡出，依次看不见
		$("#div1").fadeOut();
	  });
	  
		<button>点击淡入/淡出</button>
		$("button").click(function(){
			$("#div3").fadeToggle(3000);
		});
	  
		$("button").click(function(){
		$("#div1").fadeTo("slow",0);//0完全透明，div1看不见了
	  });
  
  7. 滑动方法
  $(selector).slideDown(speed,callback); //向下收起来
  $(selector).slideUp(speed,callback); //向上收起来
  $(selector).slideToggle(speed,callback);
  
  8.动画：
	默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
	如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
 
  8.1 创建自定义动画
  $(selector).animate({params},speed,callback);
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
  
  使用相对值：
    $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
  
  使用预定义的值
  $("div").animate({
    height:'toggle'
  });
  
  使用队列功能
  $("button").click(function(){
	  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");
  }); 
  
  9.停止动画：
  $(selector).stop(stopAll,goToEnd);
   stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
   goToEnd 参数规定是否立即完成当前动画。默认是 false。
  
  $(document).ready(function(){
	  $("#flip").click(function(){
		$("#panel").slideDown(5000);
	  });
	  $("#stop").click(function(){
		$("#panel").stop();
	  });
  });
   
   10.动画的问题  Callback 方法（类似同步，先把动画执行完了再弹框）
	// 隐藏效果完全实现后回调函数: 
	$("button").click(function(){
	  $("p").hide("slow",function(){
		alert("The paragraph is now hidden");
	  });
	});

	//没有callback回调，类似异步，警告框会在隐藏效果完成前弹出：
	$("button").click(function(){
	  $("p").hide(1000);
	  alert("The paragraph is now hidden");
	});

	11. jQuery 方法链接 Chaining
	$("#p1").css("color","red").slideUp(2000).slideDown(2000);

	12. jQuery - 获取内容和属性 DOM操作
	获得内容 - text()、html() 以及 val()
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容（包括 HTML 标记）
    val() - 设置或返回表单字段的值

	<p id="test"  value="菜鸟教程">这是段落中的 <b>粗体</b> 文本。</p>
	text()：这是段落中的粗体文本。
	html():  这是段落中的 <b>粗体</b> 文本。
	val(): 菜鸟教程
	<p><a href="http://www.runoob.com" value= "helloworld"id="runoob">菜鸟教程</a></p>
	$('#runoob').attr("href"); //http://www.runoob.com
	$('#runoob').attr('value');//helloworld
	
	13. jQuery - 设置内容和属性
	$("#btn1").click(function(){
		$("#test1").text("Hello world!");
	});
	$("#btn2").click(function(){
		$("#test2").html("<b>Hello world!</b>");
	});
	$("#btn3").click(function(){
		$("#test3").val("RUNOOB");
	});	
	$("#runoob").attr("href","http://www.runoob.com/jquery");
	
	13. JQUERY - 添加元素
	append() - 在被选元素的结尾插入内容
	prepend() - 在被选元素的开头插入内容
	after() - 在被选元素之后插入内容
	before() - 在被选元素之前插入内容	


	$("p").append("追加文本");
	function afterText(){
		var txt1="<b>I </b>";                    // 使用 HTML 创建元素 加粗的I
		var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素 斜体的love
		var txt3=document.createElement("big");  // 使用 DOM 创建元素 
		txt3.innerHTML="jQuery!";
		$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
	}
	</script>
	
	14. 删除元素
    remove() - 删除被选元素（及其子元素）
    empty() - 从被选元素中删除子元素
	$("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素：
	
	15. jQuery - 获取并设置 CSS 类
    addClass() - 向被选元素添加一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作
    css() - 设置或返回样式属性

	$("button").click(function(){
		$("h1,h2,p").addClass("blue");
		$("div").addClass("important");
	 });
	
	 $("h1,h2,p").removeClass("blue");
	 $("h1,h2,p").toggleClass("blue");
	 $("p").css({"background-color":"yellow","font-size":"200%"}); 
	
	15.jQuery 尺寸
	width(): 元素的宽度
	innerWidth() = width() + padding的宽度
	outerWidth() = innerWidth() + Border的宽度
	outerWidth(true) = outerWidth() + margin的宽度
	
	16. jQuery 遍历
	祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
	
	向上遍历DOM树：	
    parent() //返回被选元素的直接父元素 div包含ul包含li包含span； $('span').parent()就是li
	parents() // 返回被选元素的所有父元素，$('span').parents()就是li ul 和div，body，html
    parentsUntil(); //$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素,不包括div及以上

	向下遍历DOM树：	
    children() //返回被选元素的所有直接子元素
    find() //被选元素的后代元素，一路向下直到最后一个后代。
	$("div").children(); //div的直接子元素
	$("div").children("p.1");//class=1	的p的直接子元素
	$("div").find("*"); //返回 <div> 的所有后代
	$("div").find("span"); //返回属于 <div> 后代的所有 <span> 元素：

	同胞(siblings)
    siblings() 
    next()
    nextAll()
    nextUntil()
    prev()
    prevAll()
    prevUntil()

	$("h2").siblings();返回H2的所有同胞元素,平级元素
	$("h2").siblings("p").css({"color":"red","border":"2px solid red"});//返回h同胞元素中的p元素
	$("h2").next().css({"color":"red","border":"2px solid red"}); //h2后面的第一个同胞元素
	$("h2").nextAll(); 返回 <h2> 的所有跟随的同胞元素
	$("h2").nextUntil("h6"); 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
	
	过滤：
	$("div p").first(); 选取第一个 <div> 元素内部的第一个 <p> 元素
	$("div p").last();  选择最后一个 <div> 元素中的最后一个 <p> 元素
	$("p").eq(1);  返回被选元素中带有指定索引号的元素，索引从0开始
	$("p").filter(".url"); //filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除反之被返回。
	$("p").not(".url"); //与filter()相反
	
	17.JSONP 教程  跨域读取数据
	

 

转载于:https://www.cnblogs.com/bravolove/p/5942113.html