jquery教程详解免费_jquery前端开发实战教程

jquery教程详解免费_jquery前端开发实战教程jquery核心:writelessdomore1.jQuery语法基础语法:$(selector).action();2.文档就绪事件:文档完全加载完后执行函数第一种方式:$

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

	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 教程  跨域读取数据
	

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166658.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vue前端怎么导出图片_VUE中将页面导出为图片或者PDF

    vue前端怎么导出图片_VUE中将页面导出为图片或者PDF导出为图片1.将页面html转换成图片npminstallhtml2canvas–save2.在需要导出的页面引入importhtml2canvasfrom’html2canvas’;3.在methods中添加方法dataURLToBlob(dataurl){//ie图片转格式vararr=dataurl.split(‘,’),mime=arr[0].m…

  • busybox 安装mysql_安装busybox「建议收藏」

    busybox 安装mysql_安装busybox「建议收藏」安装busybox按以下步骤即可:1.root手机2.查看手机支持的cpu架构:cat/system/build.prop|grepabi我手机查出来的结果如下所示:ro.product.cpu.abi=armeabi-v7aro.product.cpu.abi2=armeabi3.下载适合你手机的Busybox,可以直接下载binary文件,地址如下:https://busybox.ne…

  • 经典Sql面试题收集!!

    经典Sql面试题收集!!

  • 关于记忆化搜索

    关于记忆化搜索转载自:http://blog.csdn.net/urecvbnkuhbh_54245df/article/details/5847876记忆化搜索: 算法上依然是搜索的流程,但是搜索到的一些解用动态规划的那种思想和模式作一些保存。一般说来,动态规划总要遍历所有的状态,而搜索可以排除一些无效状态。更重要的是搜索还可以剪枝,可能剪去大量不必要的状态,因此在空间开销上往往比动

  • 我给大家整理了50个开源的Java项目

    我给大家整理了50个开源的Java项目大家好,我是孟哥。在学习交流群,其他小伙伴总是问我:孟哥,项目能不能搞得全一些。我想一次学个够。撸完50个项目,我住院了,但是好在项目总结完了。孟哥花了好几天,一次撸了50个项目给大家,非常的香,技术、知识非常的的全面。学起来贼带劲。源码开源,关注+评论(50个源码)+转发,私信我获取源码。系统的截图如下所示:源码开源,关注+评论(50个源码)+转发,私信我获取源码。…

  • 顺序表的定义_顺序表的逻辑顺序和物理顺序

    顺序表的定义_顺序表的逻辑顺序和物理顺序顺序表的定义线性表的顺序存储又称为顺序表来看一个生活中的例子:周末和朋友一起吃火锅,人非常多,我们需要在等候区等候,这个等候区就与顺序表有非常多的相似之处,借助它去理解顺序表的特点。首先,在等候

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号