尚硅谷-jQuery讲解

1、jQuery 的介绍

  • jQuery 是 JavaScript 和 Query（查询），它就是辅助 JavaScript 的 js类库。
  • 体验使用 jQuery给一个按钮绑定单击事件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../jquery-1.7.2.js"></script>
  </head>
  <body>

    <button id="btnId">SayHello</button>

    <script type="text/javascript">
      /*
		window.onload = function(){
			var btnObj1 = document.getElementById("btnId");
			btnObj1.onclick = function (){
				alert("js 原生的单击事件！");
			};
		};
		 */

      $(function (){	//表示加载页面，相当于 window.onload = function(){};
        $btnObj = $("#btnId"); //根据id查询标签对象
        $btnObj.click(function (){	//绑定单击事件
          alert("jQuery 的单击事件！")
        });
      });

    </script>
  </body>
</html>
  • 常见问题?
    • 使用 jQuery 一定要导入 jQuery库。
    • jQuery 中的 $ 本质上是个函数。
    • 怎么为按钮添加点击响应函数？
      • 使用 jQuery 查询到标签对象
      • 使用标签对象.click( function(){ } )

2、jQuery 的核心函数

  • $ 是 jQuery 的核心函数，$() 就是调用$这个函数
    • 传入参数为 [ 函数 ] 时:
      • 表示页面加载完成，相当于 window.onload = function(){}
    • 传入参数为 [ HTML 字符串 ] 时：
      • 创建这个 html 标签对象
    • 传入参数为 [ 选择器字符串 ] 时：
      • $("#id 属性值") ：id 选择器，根据 id 查询标签对象
      • $("标签名")：标签选择器，根据指定的标签名查询标签对象
      • $(".class 属性值")：类型选择器，可以根据 class 属性查询标签对象
    • 传入参数为 [ DOM 对象] 时：
      • 会把这个 dom 对象转化为 jQuery 对象

3、jQuery 对象和 dom 对象的区分

3.1、什么是 jQuery对象，什么是 dom对象？

  • Dom对象
    • 通过 getElementById()查询出来的标签对象
    • 通过 getElementByName()查询出来的标签对象
    • 通过 getElementByTagName()查询出来的标签对象
    • 通过 createElement() 方法查询出来的对象
    • Dom对象 alert 出来的效果是；[object HTML 标签名 Element]
  • jQuery对象
    • 通过 jQuery提供的 API 创建的对象
    • 通过 jQuery提供的 API 查询到的对象
    • 通过 jQuery包装的 dom对象

3.2、jQuery对象的本质是什么？

  • jQuery 的对象是：dom对象的数组 + jQuery提供的一系列功能函数

3.3、jQuery对象和 dom对象的使用区别

  • jQuery对象和dom对象的属性和方法不通用

3.4、dom对象和 jQuery对象的相互转换

  • dom对象转化为 jQuery对象
    • 先有 dom对象
    • $(dom对象) 就可以转化成 jQuery对象
  • jQuery对象转化为 dom对象
    • 先有 jQuery对象
    • jQuery对象[下标]取出相应的 dom对象

4、jQuery的选择器

4.1、基本选择器

#id选择器 根据 id查找标签对象
.class选择器 根据class查找标签对象
element选择器 根据标签名查找对象
*选择器 表示所有的元素
selector1,select2 组合选择器 合并选择器1，选择器2的结果返回
  • p.myClass：表示标签名为p标签，而且class类型为myClass的对象
<script type="text/javascript">

  $(window).ready(function (){
    //1.选择 id 为 one 的元素 "background-color","#bbffaa"
    $("#btn1").click(function (){
      $("#one").css("background-color","#bbffaa");
    });
    //2.选择 class 为 mini 的所有元素
    $("#btn2").click(function (){
      $(".mini").css("background-color","#bbffaa");
    });

    //3.选择 元素名是 div 的所有元素
    $("#btn3").click(function (){
      $("div").css("background-color","#bbffaa");
    });

    //4.选择所有的元素
    $("#btn4").click(function (){
      $("*").css("background-color","#bbffaa");
    });

    //5.选择所有的 span 元素和id为two的元素
    $("#btn5").click(function (){
      $("span,#two").css("background-color","#bbffaa");
    });
  });
</script>

4.2、层次选择器

ancestor descendant 后代选择器 给定的祖先元素下匹配的所有后代元素
parent>child 子元素选择器 给定父元素下匹配的所有子元素
prev+next 相邻兄弟选择器 匹配的紧挨在 prev之后的相邻兄弟元素
prev~siblings 之后兄弟选择器 匹配的在prev之后的兄弟元素 
<script type="text/javascript">
  $(document).ready(function(){
    //1.选择 body 内的所有 div 元素 
    $("#btn1").click(function(){
      $("body div").css("background", "#bbffaa");
    });

    //2.在 body 内, 选择div子元素  
    $("#btn2").click(function(){
      $("body>div").css("background", "#bbffaa");
    });

    //3.选择 id 为 one 的下一个 div 元素 
    $("#btn3").click(function(){
      $("#one+div").css("background", "#bbffaa");
    });

    //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
    $("#btn4").click(function(){
      $("#two~div").css("background", "#bbffaa");
    });
  });
</script>

4.3、过滤选择器

  • 基本过滤器：
:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如h1,h2之类的标题元素
:animated 匹配所有正在执行动画效果的元素 
<script type="text/javascript">
  $(document).ready(function(){
    function anmateIt(){
      $("#mover").slideToggle("slow", anmateIt);
    }
    anmateIt();
  });

  $(document).ready(function(){
    //1.选择第一个 div 元素  
    $("#btn1").click(function(){
      $("div:first").css("background", "#bbffaa");
    });

    //2.选择最后一个 div 元素
    $("#btn2").click(function(){
      $("div:last").css("background", "#bbffaa");
    });

    //3.选择class不为 one 的所有 div 元素
    $("#btn3").click(function(){
      $("div:not(.one)").css("background", "#bbffaa");
    });

    //4.选择索引值为偶数的 div 元素
    $("#btn4").click(function(){
      $("div:even").css("background", "#bbffaa");
    });

    //5.选择索引值为奇数的 div 元素
    $("#btn5").click(function(){
      $("div:odd").css("background", "#bbffaa");
    });

    //6.选择索引值为大于 3 的 div 元素
    $("#btn6").click(function(){
      $("div:gt(3)").css("background", "#bbffaa");
    });

    //7.选择索引值为等于 3 的 div 元素
    $("#btn7").click(function(){
      $("div:eq(3)").css("background", "#bbffaa");
    });

    //8.选择索引值为小于 3 的 div 元素
    $("#btn8").click(function(){
      $("div:lt(3)").css("background", "#bbffaa");
    });

    //9.选择所有的标题元素
    $("#btn9").click(function(){
      $(":header").css("background", "#bbffaa");
    });

    //10.选择当前正在执行动画的所有元素
    $("#btn10").click(function(){
      $(":animated").css("background", "#bbffaa");
    });
  });
</script>

4.4、内容过滤器

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素 
$(document).ready(function(){
  //1.选择 含有文本 'di' 的 div 元素
  $("#btn1").click(function(){
    $("div:contains('di')").css("background", "#bbffaa");
  });

  //2.选择不包含子元素(或者文本元素) 的 div 空元素
  $("#btn2").click(function(){
    $("div:empty").css("background", "#bbffaa");
  });

  //3.选择含有 class 为 mini 元素的 div 元素
  $("#btn3").click(function(){
    $("div:has('.mini')").css("background", "#bbffaa");
  });

  //4.选择含有子元素(或者文本元素)的div元素
  $("#btn4").click(function(){
    $("div:parent").css("background", "#bbffaa");
  });
});

4.5、可见性过滤器

hidden 匹配可见元素
visible 匹配不可见元素 
$(document).ready(function(){
  //1.选取所有可见的  div 元素
  $("#btn1").click(function(){
    $("div:visible").css("background", "#bbffaa");
  });

  //2.选择所有不可见的 div 元素
  //不可见：display属性设置为none，或visible设置为hidden
  $("#btn2").click(function(){
    $("div:hidden").show("slow").css("background", "#bbffaa");
  });

  //3.选择所有不可见的 input 元素
  $("#btn3").click(function(){
    alert($("input:hidden").attr("value"));
  });	
});

4.6、属性过滤器

[attribute] 匹配包含给定属性的元素
[attribute = value] 匹配属性是某个特定值的元素
[attribute != value] 匹配所有不包含指定属性的元素，或者属性不等于指定值的元素
[attribute ^= vaule] 匹配属性是以某些值开始的元素
[attribute $= value] 匹配属性是以某些值结束的元素
[attribute *= value] 匹配属性是包含某些值的元素
[attribute1][attribute2]... 复合属性选择器，需要同时满足多个条件时使用 
$(function() {
		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});
		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});
		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!='test']").css("background", "#bbffaa");
		});
		//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^='te']").css("background", "#bbffaa");
		});
		//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$='est']").css("background", "#bbffaa");
		});
		//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*='es']").css("background", "#bbffaa");
		});
		
		//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});
		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {
			$("div[title][title!='test']").css("background", "#bbffaa");
		});
	});

4.7、表单过滤器

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden

4.8、表单对象属性过滤器

:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中复选框、单选框等，不包括select中的option
:selected 匹配所有选中的option元素 
$(function(){
  //1.对表单内 可用input 赋值操作
  $("#btn1").click(function(){
    $(":text:enabled").val("New Value");
  });
  //2.对表单内 不可用input 赋值操作
  $("#btn2").click(function(){
    $(":text:disabled").val("New Value Too");
  });
  //3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
  $("#btn3").click(function(){
    alert($(":checkbox:checked").size())
  });
  //4.获取多选框，每个选中的value值
  $("#btn4").click(function(){
    $(":checkbox:checked").each(function (){
      //this是当前数组元素的dom对象
      // alert(this);
      alert(this.value);
    });
  });
  //5.获取下拉框选中的内容  
  $("#btn5").click(function(){
    //方法1
    $("select option:selected").each(function (){
      alert(this.innerText);
    });

    //方法2
    var str = "";
    //注意这个选择器的特殊，因为select里面的option是真正的被选择项，
    //所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
    //必须按照基本选择器选择后代的方法选
    var els = $("select option:selected");
    console.log(els);
    for(var i=0;i<els.size();i++){
      str += "【"+$(els[i]).val()+"】";
    }
    alert(str);
  });
});

4.9、jQuery元素筛选

函数 说明
eq() 获取给定索引的元素
first() 获取第一个元素
last() 获取最后一个元素
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回true
has(exp) 返回包含有匹配选择器的元素的元素
not(exp) 删除匹配选择器的元素
children(exp) 返回匹配给定选择器的子元素
find(exp) 返回匹配给定选择器的后代元素
next() 返回当前元素的下一个兄弟元素
nextAll() 返回当前元素后面所有的兄弟元素
nextUtil(exp) 返回当前元素之后到指定匹配的元素为止之间的所有同辈元素
parent() 返回父元素
prev() 返回当前元素的前一个兄弟元素
prevAll() 返回当前元素的前面所有的兄弟元素
prevUtil(exp) 返回当前元素之前到指定匹配的元素为止之间的所有同辈元素
siblings(exp) 返回当前元素所有兄弟元素
add(exp) 追加其他的匹配选择器的元素到当前jQuery对象中 
$(document).ready(function(){
  //(1)eq()  选择索引值为等于 3 的 div 元素
  $("#btn1").click(function(){
    $("div").eq("3").css("background-color","#bfa");
  });
  //(2)first()选择第一个 div 元素
  $("#btn2").click(function(){
    //first()   选取第一个元素
    $("div").first().css("background-color","#bfa");
  });
  //(3)last()选择最后一个 div 元素
  $("#btn3").click(function(){
    //last()  选取最后一个元素
    $("div").last().css("background-color","#bfa");
  });
  //(4)filter()在div中选择索引为偶数的
  $("#btn4").click(function(){
    //filter()  过滤   传入的是选择器字符串
    $("div").filter(":even").css("background-color","#bfa");
  });
  //(5)is()判断#one是否为:empty或:parent
  //is用来检测jq对象是否符合指定的选择器
  $("#btn5").click(function(){
    alert($("#one").is(":empty"));
  });

  //(6)has()选择div中包含.mini的
  $("#btn6").click(function(){
    //has(selector)  选择器字符串    是否包含selector
    $("div").has(".mini").css("background-color","#bfa");
  });
  //(7)not()选择div中class不为one的
  $("#btn7").click(function(){
    //not(selector)  选择不是selector的元素
    $("div").not(".one").css("background-color","#bfa");
  });
  //(8)children()在body中选择所有class为one的div子元素
  $("#btn8").click(function(){
    //children()  选出所有的子元素
    $("body").children("div.one").css("background-color","#bfa");
  });
  //(9)find()在body中选择所有class为mini的div元素
  $("#btn9").click(function(){
    //find()  选出所有的后代元素
    $("body").find("div.mini").css("background-color","#bfa");
  });
  //(10)next() #one的下一个div
  $("#btn10").click(function(){
    //next()  选择下一个兄弟元素
    $("#one").next().css("background-color","#bfa");
  });
  //(11)nextAll() #one后面所有的span元素
  $("#btn11").click(function(){
    //nextAll()   选出后面所有的元素
    $("#one").nextAll("span").css("background-color","#bfa");
  });
  //(12)nextUntil() #one和span之间的元素
  $("#btn12").click(function(){
    //
    $("#one").nextUntil("span").css("background-color","#bfa")
  });
  //(13)parent() .mini的父元素
  $("#btn13").click(function(){
    $(".mini").parent().css("background-color","#bfa");
  });
  //(14)prev() #two的上一个div
  $("#btn14").click(function(){
    //prev()  
    $("#two").prev("div").css("background-color","#bfa")
  });
  //(15)prevAll() span前面所有的div
  $("#btn15").click(function(){
    //prevAll()   选出前面所有的元素
    $("span").prevAll("div").css("background-color","#bfa")
  });
  //(16)prevUntil() span向前直到#one的元素
  $("#btn16").click(function(){
    //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
    $("span").prevUntil("#one").css("background-color","#bfa")
  });
  //(17)siblings() #two的所有兄弟元素
  $("#btn17").click(function(){
    //siblings()    找到所有的兄弟元素，包括前面的和后面的
    $("#two").siblings().css("background-color","#bfa")
  });

  //(18)add()选择所有的 span 元素和id为two的元素
  $("#btn18").click(function(){
    $("span").add("#two").css("background-color","#bfa");
  });
});

5、jQuery的属性操作

5.1、html()、text()、val()

函数 说明 对应dom操作
html() 可以设置和获取起始标签与结束标签之间的内容 innerHTML
text() 可以设置和获取起始标签与结束标签之间的文本 innerText
val() 1、可以设置和获取表单项的value属性值
2、可以设置批量操作表单项的选中状态		 value 
<script type="text/javascript">
  $(document).ready(function (){
  //1.测试html()
  //获取
  alert($("#div1").html());
  //设置
  $("#div1").html("<span>这是一个html()设置的span标签</span>");

  //2.测试text()
  //获取
  alert($("#div1").text());
  //设置
  $("#div1>span").text("这是通过text()设置的span标签");

  //3.测试val()
  //获取
  alert($(":radio:eq(0)").val());
  //设置
  $(":checkbox[value=checkbox1]").val("checkbox10");
  let $checkbox = $(":checkbox");
  $checkbox.each(function (){
    alert(this.value);
  });

  //测试val()可以同时操作多个表单项选中状态
  //1.单选框
  $(":radio").val(["radio1"]);
  //2.多选框
  $(":checkbox").val(["checkbox3","checkbox2"]);
  //3.多选下拉列表
  $("#multiple").val(["mul1","mul2","mul3"]);
  //4.单选下拉列表
  $("#single").val(["sin3"]);

  //5.同时操作多种表单项
  $(":radio,:checkbox,#multiple,#single").val(["radio2","checkbox3","checkbox2","mul4","mul2","mul3","sin2"]);
});
</script>

5.2、attr()、prop()

函数 说明
attr() 可以设置和获取属性的值，推荐操作非标准的属性时使用
prop() 可以设置和获取属性的值，推荐使用在checked、readOnly、selected、disabled等系统属性

prop("checked")的返回值为 true /false

//测试 attr()
$(":checkbox:first").attr("abc","abcValue");
alert( $(":checkbox:first").attr("abc"));//abcValue
//removeAttr()
$(":checkbox:first").removeAttr("abc");
alert( $(":checkbox:first").attr("abc"));//undefinded

//测试 prop()
$(":checkbox:first").prop("checked",true);
alert($(":checkbox:first").prop("checked"));//true
//removeProp()
$(":checkbox:first").removeProp("checked");
alert($(":checkbox:first").prop("checked"));//false

5.3、练习

  • 全选，全不选，反选
$(function(){
  //全选
  $("#checkedAllBtn").click(function (){
    $(":checkbox").prop("checked",true);
  });

  //全不选
  $("#checkedNoBtn").click(function (){
    $(":checkbox").prop("checked",false);

  });

  //反选
  $("#checkedRevBtn").click(function (){
    $(":checkbox[name='items']").each(function (){
      //each遍历中的 this代表当前元素的Dom对象
      //注意要使用jQuery的 prop函数，需要将 this转换成 jQuery对象
      // $(this).prop("checked",!$(this).prop("checked"));
      //或者使用 Dom对象的操作方式
      this.checked = !this.checked;
    });
    //反选完，要判断是否满选，
    // 获取选中的球类个数
    var checkedCount = $(":checkbox[name='items']:checked").length;
    // 全部的球类个数
    var allcheckbox = $(":checkbox[name='items']").length;
    /*if (checkedCount == allcheckbox){
				$("#checkedAllBox").prop("checked",true);
			}else {
				$("#checkedAllBox").prop("checked",false);
			}*/

    //代码优化
    $("#checkedAllBox").prop("checked",(checkedCount === allcheckbox));

  });

  //提交
  $("#sendBtn").click(function (){
    $(":checkbox[name='items']:checked").each(function (){
      alert(this.value);
    });
  });

  //全选/全不选复选框的单击事件
  $("#checkedAllBox").click(function (){
    //在function函数中，存在this对象代表当前正在响应事件的Dom对象
    //alert(this.id);	//checkedAllBox

    $(":checkbox[name='items']").prop("checked",this.checked);
  });

  //为了保证球类复选框点击，上方的全选/全不选复选框一样生效，
  // 需要对球类复选框绑定单击事件
  $(":checkbox[name='items']").click(function (){
    //对球类运动的选中个数进行判断
    var allCount = $(":checkbox[name='items']").length;
    var checkedCount = $(":checkbox[name='items']:checked").length;

    $("#checkedAllBox").prop("checked",allCount==checkedCount);
  });
});

5.4、Dom的增删改

内部插入：

函数 实例 解释
appendTo() a.appendTo(b) 把a插到b的所有子元素末尾
prependTo() a.prependTo(b) 把a插到b的所有子元素首部

外部插入：

函数 实例 解释
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab


替换：

函数 实例 解释
replaceWith() a.replaceWith(b) 用一个b替换所有a
replaceAll() a.replaceAll(b) 用a替换b (一个a换一个b)


删除：

函数 实例 解释
remove() a.remove() 删除a标签
empty() a.empty() 清空a标签的内容 
$(function(){
  $("#btn01").click(function(){
    //创建一个"广州"节点,添加到#city下[appendTo()]
    //子节点.appendTo(父节点)
    $("<li>广州</li>").appendTo("#city");
  });

  $("#btn02").click(function(){
    //创建一个"广州"节点,添加到#city下[prependTo()]
    $("<li>广州</li>").prependTo("#city");
  });

  $("#btn03").click(function(){
    //将"广州"节点插入到#bj前面[insertBefore()]
    //前边.insertBefore(后边的)
    $("<li>广州</li>").insertBefore("#bj");
  });

  $("#btn04").click(function(){
    //将"广州"节点插入到#bj后面[insertAfter()]
    //后边.insertAfter(前边的)
    $("<li>广州</li>").insertAfter("#bj");
  });

  $("#btn05").click(function(){
    //使用"广州"节点替换#bj节点[replaceWith()]
    //被替换的.replaceWith()
    $("#bj").replaceWith("<li>广州</li>");
  });

  $("#btn06").click(function(){
    //使用"广州"节点替换#bj节点[replaceAll()]
    //新的节点.replaceAll(旧的节点)
    $("<li>广州</li>").replaceAll("#bj");
  });

  $("#btn07").click(function(){
    //删除#rl节点[remove()]
    $("#rl").remove();

  });

  $("#btn08").click(function(){
    //掏空#city节点[empty()]
    $("#city").empty();
  });
});
posted @ 2021-03-07 14:41  懒惰喵星人  阅读(42)  评论(0)    收藏  举报