Web前端 | jQuery

jquery引入

jquery选择器

		<script type="text/javascript">
			
			$(function(){
				
				// css选择器在jquery中全部可用
				$("span").on("click",function(){
					console.log(this)
				})
				
				// jquery增加的选择器				
				$("span:first").on("click",function(){
					console.log("第一个")
				})				
				$("span:last").on("click",function(){
					console.log("最后一个")
				})
				
				$("span:eq(2)").on("click",function(){
					console.log("第三个")
				})
				
				$("span:lt(3)").on("click",function(){
					console.log("[0,1,2]元素")
				})
				$("span:gt(3)").on("click",function(){
					console.log("[-1,-2]元素")
				})
				
				$("span:even").css("color","red")
				$("span:odd").css({"color":"blue","background-color":"yellow"})
			})
			
			
			
		</script>

文档事件

类似js，但名称不含onready() 规定当 DOM 完全加载时要执行的函数

resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件

on() 方法在被选元素及子元素上添加一个或多个事件处理程序

$("p").on("click",function(){
     alert("段落被点击了。");
     });

off()移除通过 on() 方法添加的事件处理程序
$("p").off("click");

one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

$("p").one("click",function(){
        alert("段落被点击了。");
        });

其他常用事件
click、dbclick、mouseenter、mouseleave、mouseover、mousemove

文档处理

• 元素内容
  .text("") 获取、修改文本
  .html("")
  .val("")

• 元素属性、样式
  .css({"":"", “”:""})
  .attr 获取、修改属性值
  .prop 设置属性有效性true/false

• 类
  .hasClass("")
  .addClass("")
  .removeClass("")
  .toggleClass("") 开关，有变无/无变有

tip:
js：this
jquery：$(this)

• 文档元素操作
  tag1=<img src="img/qq.png" >
  $(“div”).append(tag1) 在div所有子元素后添加
  .prepend(tag1) 在div所有子元素之前
  .before(tag1) 在选中元素之前
  .after(tag1) 在选中元素之后
  .replaceWith(tag1) 用tag1替换div
  .remove() 移除元素
  .empty() 清空元素内容

• 动画
  动画效果均可带事件参数：包括slow 、fast、 毫秒
  均可执行回调方法

1. 隐藏、显示
   $(“p”).hide();
   $(“p”).show();
   $(“p”).toggle();

2. 淡入、淡出
   $(“p”).fadeIn();
   $(“p”).fadeOut();
   $(“p”).fadeToggle();

3. 划入、划出
   $(“p”).slideDown();
   $(“p”).slideUp();
   $(“p”).slideToggle();

4. 自定义动画
   提供easing参数swing开头结尾慢,中间快 （默认）linear （匀速）
   $(“div”).animate({left:‘250px’}，3000,“linear”,callback);
   $(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast);

5. 停止动画
   $(“p”).stop();
   $(“p”).stop(stopAll,goToEnd);

6. 延迟动画
   $(“p”).delay(“slow”).fadeIn();