JQuery选择器和常用方法

jQuery

  • 什么是jQuery
    1. 是一个JavaScript框架
    2. 让程序员写的更少 实现的更多
    3. 简化原生js代码
    4. jQuery本身就是通过js语言所写的一个js文件
    5. 可以像css一样通过选择器查找元素
      js: var div = document.getElementById(“id”);
      jq: $("#id")
    6. 可以像css一样批量添加样式
      js: var imgs = document.getElementsByTagName(“img”);
      for(var i=0;i<imgs.length;i++){
      imgs[i].style.display=“none”;
      }
      jq: $(“img”).css(“display”,“none”);
    7. 可以解决部分兼容性问题
引入jQuery
  • 由于jq本身就是一个js文件 所以引入方式和一个普通的js文件一样通过Script标签的src属性引入
js对象和jq对象互相转换
  1. js转jq
    var jq = $(js);
  2. jq转js
    var js = jq[0];

选择器

基础选择器
  1. 标签名选择器 $(“div”)
  2. id选择器 $("#id")
  3. 类选择器 $(".class")
  4. 分组选择器 $(“div,#id,.class”)
  5. 任意元素选择器 $("*")
层级选择器
  1. $(“div span”) 匹配div里面所有的span
  2. $(“div>span”) 匹配div里面span子元素
  3. $(“div+span”) 匹配div的弟弟span元素
  4. $(“div~span”) 匹配div的弟弟们span元素
  • 和层级相关的方法
    1. 匹配元素的所有兄弟元素
      $("#abc").siblings(); //得到id为abc元素的所有兄弟
      $("#abc").siblings(“div”); //得到id为abc元素的所有div兄弟
    2. 匹配元素的哥哥
      $("#abc").prev(); 得到元素的哥哥元素
      $("#abc").prev(“p”); 得到元素的哥哥p元素
    3. 匹配元素的哥哥们
      $("#abc").prevAll(); 得到元素的所有哥哥元素
      $("#abc").prevAll(“span”); 得到元素的所有哥哥元素
    4. 匹配元素的弟弟
      $("#abc").next(); 得到元素的弟弟元素
      $("#abc").next(“p”); 得到元素的弟弟p元素
    5. 匹配元素的弟弟们
      $("#abc").nextAll(); 得到元素的弟弟们元素
      $("#abc").nextAll(“p”); 得到元素的弟弟们p元素
过滤选择器
  1. $(“div:first”) 匹配所有div中的第一个div元素
  2. $(“div:last”) 匹配所有div中最后一个div元素
  3. $(“div:even”) 匹配所有div中下标为偶数的div元素
  4. $(“div:odd”) 匹配所有div中下标为奇数的div元素
  5. $(“div:eq(n)”) 匹配所有div中下标值为n的div元素
  6. $(“div:lt(n)”) 匹配所有div中下标值小于n的div元素
  7. $(“div:gt(n)”) 匹配所有div中下标值大于n的div元素
  8. $(“div:not(.abc)”) 匹配所有div中class值不为abc
内容选择器
  1. $(“div:has§”) 匹配包含p子元素的div
  2. $(“div:empty”) 匹配空的div
  3. $(“div:parent”) 匹配非空的div
  4. $(“div:contains(‘xxx’)”) 匹配包含xxx文本的div
可见选择器
  1. $(“div:hidden”) 匹配所有隐藏的div
  2. $(“div:visible”) 匹配所有可见的div
  • 和隐藏显示相关的方法
    $("#abc").hide(); 隐藏
    $("#abc").show(); 显示
    $("#abc").toggle(); 隐藏、显示切换
属性选择器
  1. $(“div[id]”) 匹配包含id属性的div元素
  2. $(“div[id=‘xxx’]”) 匹配id值为xxx 的div元素
  3. $(“div[id!=‘xxx’]”) 匹配id值不为xxx的div元素
子元素选择器
  1. $(“div:first-child”) 匹配是div元素,并且是第一个子元素
  2. $(“div:last-child”) 匹配是div元素,并且是最后一个子元素
  3. $(“div:nth-child(n)”) 匹配是div元素,并且是第n个子元素 从1开始
表单选择器
  1. $(":input") 匹配form表单中所有的控件
  2. $(":password") 匹配所有密码框
  3. $(":radio") 匹配所有单选
  4. $(":checkbox") 匹配所有多选
  5. $(":checked") 匹配所有选中的单选、多选、下拉选
  6. $(“input:checked”) 匹配所有选中的单选和多选
  7. $(":selected") 匹配所有选中的下拉选

创建和添加元素

  1. 创建元素
    var d = $("<div id=‘d1’>abc</div>");
  2. 添加元素
    父元素.append(d); //添加到最后面
    父元素.prepend(d);//添加到最前面
  3. 插入元素
    $("#abc").before(新元素);
    $("#abc").after(新元素);
  4. 删除元素
    $("#abc").remove();
获取和修改元素的文本内容
$("#abc").text();
$("#abc").text("xxx");
获取和修改元素的html内容
$("#abc").html(); 获取
$("#abc").html("<h1>abc</h1>");
获取和修改元素的css样式
$("#abc").css("left"); 获取left的属性值
$("#abc").css("left","100px"); 赋值
$("#abc").css({"width":"100px","height":"200px"});
获取和修改元素的属性
$("#abc").attr("class"); 获取
$("#abc").attr("class","c1"); 赋值  

获取元素的子元素和父元素

  1. 元素对象.children()
  2. 元素对象.parent()

jQuery事件相关

  1. 常见事件
  • 鼠标事件: 点击事件 click 鼠标移入事件mouseover 鼠标移出mouseout 鼠标按下mousedown 鼠标抬起mouseup 鼠标移动mousemove
  • 键盘事件: 键盘按下 keydown 键盘抬起 keyup
  • 状态改变事件: 页面加载完成$(function(){}) 获取焦点focus 失去焦点blur 表单提交submit 值改变change 窗口尺寸改变resize
  1. 事件模拟
    元素对象.trigger(“事件名”);
  2. 鼠标移入移出事件合并
    元素对象.hover(鼠标移入执行方法,鼠标移出执行方法);

动画相关

隐藏hide(3000) 显示 show() 淡出fadeOut() 淡入fadeIn() 上滑slideUp() 下滑slideDown() 自定义animate({},时间);

		if(this.value=="隐藏"){
			$("img").hide(3000,function(){
				alert('动画做完了');
			});
		}else if(this.value=="显示"){
			$("img").show(2000,function(){
				alert('xxx');
			});
		}else if(this.value=="淡出"){
			 $("img").fadeOut(1000);
		}else if(this.value=="淡入"){
			 $("img").fadeIn(2000);
		}else if(this.value=="上滑"){
			 $("img").slideUp(2000);
		}else if(this.value=="下滑"){
			 $("img").slideDown(2000);
		}else{//自定义
			$("img").animate({"left":"200px"},1000)
				.animate({"top":"200px"},1000)
				.animate({"left":"0px"},1000)
				.animate({"top":"0px"},1000)
				.animate({"width":"200px"},1000)
				.animate({"width":"100px"},1000)
				.fadeOut(3000,function(){
					$("img").remove();
				});
		}
		
	});
});
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值