一、jQuery介绍

  1. 概念：将一些常用的功能封装的函数库

1.1 jQuery的核心函数

  1. //jQuery的核心函数
  2. $()
  3. 核心函数里面可以放入变量、字符串、函数及对象

1.2 jQuery的入口函数

  1. //方式1：
  2. jQuery(document).ready(function(){
  3.     console.log("入口函数---方式1");
  4. })
  6. //方式2：
  7. $(document).ready(function(){
  8.     console.log("入口函数---方式2");
  9. })
  11. //方式3：
  12. jQuery(function(){
  13.     console.log("入口函数---方式3");
  14. })
  16. //方式4：推荐方式，在核心函数中传入一个匿名函数，作为入口函数
  17. $(function(){
  18.     console.log("入口函数----方式4");
  19. })

1.3 原生js中的入口函数

  1. window.onload = function(){
  2.     console.log("原生js的入口函数");
  3. }

将原生js入口函数和jQuery入口函数做对比：

  1. 原生js入口函数后面的会将前面的覆盖，只由最后一个入口函数有效果，而jqeury入口函数，分别独立执行，互相不影响。
  2. 原生js入口函数会等待页面标签及属性加载成功才能执行，而jQuery入口函数，页面打开立即执行，没有影响。

二、jQuery选择器

2.1 基本选择器

  1. 1、id选择器
  2.     $("#one").css("border","3px red solid");
  3. 2、标签选择器
  4.     $("li").css("background-color","red");
  5. 3、class选择器
  6.     $(".current").css("background-color","red");
  7. 4、全局选择器
  8.     $("*").css("border","2px red solid");
  9. 5、多选择器
  10.     $(".current,#temp,.action").css("border","2px red solid");

2.2 层级选择器

  1. 1、多个选择器共同作用，前面的选择器用于筛选范围，最后一个选择器确定标签
  2.     $("#one li").css("border","2px blue solid");
  3. 2、找出指定父标签下的符合要求的直接子标
  4.     $("#one>.current").css("border","3px black solid");
  5. 3、找出指定标签next的第一个符合要求的兄弟标签
  6.     $("#one+ul").css("border","3px red solid");
  7. 4、找出指定标签next的所有符合要求的兄弟标签
  8.     $(".action~li").css("border","3px blue solid");

2.3 基本筛选器

  1. 1、从符合选择器要求的基础上，筛选出第一个标签
  2.     $("#two .current:first").css("border","3px blue solid");
  3. 2、从符合选择器要求的基础上，筛选出最后一个标签
  4.     $(".current:last").css("border","3px red solid");
  5. 3、从符合选择器要求的基础上，筛选出没有使用过指定选择器的标签
  6.     $("#two li:not(.current)").css("border","3px black solid");
  7. 4、从符合选择器要求的基础上，筛选下标为偶数的标签，下标从0开始
  8.     $("#two li:even").css("background-color","#0c0c0c");
  9. 5、从符合选择器要求的基础上，筛选下标为奇数的标签，下标从0开始
  10.     $("#two li:odd").css("background-color","#FFA500");
  11. 6、从符合选择器要求的基础上，筛选出指定下标的标签
  12.     $("#two li:eq(2)").css("background-color","#FFA500");
  13. 7、从符合选择器要求的基础上，筛选出大于指定下标的标签
  14.     $("#two li:gt(2)").css("background-color","#FFA500");
  15. 8、从符合选择器要求的基础上，筛选出小于指定下标的标签
  16.     $("#two li:lt(2)").css("background-color","#FFA500");

2.4 内容选择器

  1. //内容选择器：通过两个标签之间的文本内容进行筛选，或者是两个标签之间的子标签
  2. 1、找出文本中包含指定字符的标签（也可以是子标签文本内容包含）
  3.     $("li:contains(1)").css("border","3px red solid");
  4. 2、找出指定标签中没有任何文本内容或者没有任何子标签
  5.     $("li:empty").css("border","3px blue solid");
  6. 3、从符合选择器要求的标签中，去查询子标签是否有满足条件的，如果有，则父标签被选择上
  7.     $("ul:has(.current)").css("border","3px black solid");
  8. 4、从符合要求的标签中，找出含有子标签或者内容的标签
  9.     $("span:parent").css("border","3px red solid");

2.5 可见性选择器

  1. 1、从符合选择器要求的标签中，找出隐藏的标签
  2.     $("img:hidden").css("display","block");
  3. 2、从符合选择器要求的标签中，找出显示的标签
  4.     $("img:visible").css("display","none");

2.6 属性选择器

  1. 1、找出具有指定属性名称的标签    $("img[title]").css("border-radius","50%");2、找出具有指定属性名称并且具有指定属性值的标签    $("img[title=123]").css("border-radius","50%");3、找出具有指定属性名称并且属性值按照指定字符开头的标签    $("img[title ^= 1]").css("border-radius","50%");4、找出具有指定属性名称并且属性值按照指定字符结尾的标签    $("img[title $= 3]").css("border-radius","50%");5、找出具有指定属性名称并且属性值包含指定字符的标签    $("img[title *= 1]").css("border-radius","50%");6、找出同时具有多个指定属性名称的标签    $("img[title][alt]").css("border-radius","50%");

三、jquery选择器

3.1 子元素选择器

  1. 1、:first-child 从符合要求的选择器里面，找出作为该父标签下的第一个子标签
  2.     $("#two li:first-child").css("border","3px blue solid");
  3. 2、:last-child 从符合要求的选择器里面，找出作为该父标签下的最后一个子标签
  4.     $("#two li:last-child").css("border","3px blue solid");
  5. 3、:nth-child()从符合要求的选择器里面，找出作为该父标签下的指定位置的子标签，计数从1开始
  6.     $("#two li:nth-child(2)").css("border","3px red solid");
  7. 4、:only-child从符合要求的选择器里面，找出作为该父标签下的唯一子标签
  8.     $("li:only-child").css("border","3px black solid");

3.2 表单选择器

  1. 1、:input 将所有带有input特性的标签选择上
  2.     $(":input").css("width","200px");
  3. 2、:text 选择出表单中type值为text的标签
  4.     $(":text").css("border","3px blue solid");
  5. 3、:password 选择出表单中type值为password的标签
  6.   $(":password").css("border","3px blue solid");
  7. 4、:radio 选择出表单中type值为radio的标签
  8.   $(":radio").css("width","100px");
  9. 5、:checkbox 选择出表单中type值为checkbox的标签
  10.   $(":checkbox").css("width","100px");
  11. 6、:submit 选择出表单中可以达到表达提交数据特性的标签
  12.   $(":submit").css("border","3px black solid");
  13. 7、:reset 选择出表单中可以达到重置特性的标签
  14.   $(":reset").css("border","3px black solid");
  15. 8、:button 选择出表单中选择出type值为button或者button标签
  16.   $(":button").css("border","3px black solid");
  17. 7、:image 选择出表单中选择出type值为image的标签
  18.   $(":image").css("border","3px red solid");
  19. 10、:file 选择出表单中选择出type值为file的标签
  20.     $(":file").css("border","3px red solid");

3.3 表单对象选择器

  1. 1、:获取可用的标签
  2.     var temp = $("input:enabled");
  3. 2、:获取不可用的标签
  4.     var temp = $("input:disabled");
  5. 3、获取复选框中已经被勾选上的标签
  6.     var temp = $("input:checked");

四、筛选

  1. 先使用选择器将符合要求的标签找到，再通过筛选的方法，进一步进行过滤，找到最终的标签

4.1 过滤

  1. 1、eq(index) 从符合选择器要求的标签中，用方法筛选出第几个下标的标签
  2.     $("#two li").eq(1).css("border","3px red solid");
  3. 2、first() 从符合选择器要求的标签中，用方法筛选出第一个的标签
  4.     $("#two li").first().css("border","3px red solid");
  5. 3、last() 从符合选择器要求的标签中，用方法筛选出最后一个的标签
  6.     $("#two li").last().css("border","3px red solid");
  7. 4、hasClass()用来判断单个标签中是否使用了指定的class选择器名称
  8.     var temp = $("#two li").eq(3).hasClass("current");
  9. 5、has(选择器) 判断标签的子标签是否满足has中的选择器内容
  10.     var temp = $("#three li").has(".action").css("border","3px red solid");
  11. 6、not(选择器) 从符合要求的标签中，用方法过滤出没有使用过not指定的选择器
  12.     var temp = $("#three li").not(".action").css("border","3px blue solid");
  13. 7、slice(0,1) 根据下标的范围选定，包前不包后
  14.     $("#two li").slice(1,3).css("border","3px red solid");

4.2 查找

  1. 1、children() 找出指定父标签下符合要求的子标签，如果括号不写，则找出全部子标签
  2.     $("#one").children().css("border","3px red solid");
  3. 2、find() 找出指定父标签下的所有符合要求的子标签
  4.     $("#one").find(".current").css("border","3px red solid");
  5. 3、next(),找到指定标签的下一个兄弟标签
  6.     $("#temp").next().css("border","3px red solid");
  7. 4、nextAll(),找到指定标签的后续所有兄弟标签
  8.      $("#temp").nextAll().css("border","3px red solid");
  9. 5、prev(),找到指定标签紧邻的上面第一个兄弟标签
  10.     $("#temp").prev().css("border","3px red solid");
  11. 6、prevAll(),找到指定标签上面的所有兄弟标签
  12.     $("#temp").prevAll().css("border","3px red solid");
  13. 7、siblings()除了自己的所有兄弟标签
  14.     $("#temp").siblings(".current").css("background-color","red");
  15. 8、parent();找到指定标签的直接父标签
  16.     $("#temp").parent().css("border","3px red solid");
  17. 9、parents();找到指定标签的上级标签
  18.     $("#temp").parents().css("border","3px red solid");

五、事件

5.1 鼠标事件


  1. 1、鼠标单击事件
  2. $("#out img").click(function(){
  3.     console.log(this);
  4. });
  6. 2、鼠标双击事件
  7. $("#out img").dblclick(function(){
  8.     console.log(this);
  9. });
  11. 3、鼠标移入事件:mouseenter
  12. $("img").mouseenter(function(){
  13.     $(this).css("border-radius","50%").css("border","3px red solid");
  14. })
  16. 4、鼠标移出事件:mouseleave
  17. $("img").mouseleave(function(){
  18.     $(this).css("border-radius","10px").css("border","0px red solid");
  19. })
  21. 5、鼠标移入事件：mouseover
  22. $("img").mouseover(function(){
  23.     $(this).css("border-radius","50%");
  24. })
  26. 6、鼠标移出事件：mouseout
  27. $("img").mouseout(function(){
  28.     $(this).css("border-radius","10px");
  29. })
  31. 7、鼠标移动事件：mousemove
  32. $("img").mousemove(function(){
  34. })

5.2 键盘事件

  1. 1、键盘按下事件
  2. $(window).keydown(function(event){
  3.     console.log("键盘被按下"+event.keyCode);
  4. })
  6. 2、键盘松开事件
  7. $(window).keyup(function(envet){
  8.     console.log("键盘松开"+event.keyCode);
  9. })

5.3 表单事件

  1. 1、获取焦点事件
  2. $("#tel").focus(function(){
  3.     console.log("聚焦");
  4. })
  6. 2、失去焦点事件
  7. $("#tel").blur(function(){
  8.     console.log("失去焦点");
  9. })
  11. 3、内容做了改变事件
  12. $("#tel").change(function(){
  13.     console.log("内容做了更改");
  14. })

六、属性

6.1 属性

  1. //标签中的属性操作：
  2. 1、增加属性：如果原标签中没有给属性，则attr表示新增属性    
  3. $("img").first().attr("title","哈哈哈哈");
  4. 2、获取属性：调用attr方法的时候，只传入一个属性名称，不传入属性值，表示获取原标签的属性值；
  5. var val = $("img").eq(1).attr("title");    
  6. console.log(val);
  7. 3、修改属性：使用attr方法的时候，传入的属性名和属性值，如果在原标签中已经存在，则作用是修改
  8. $("img").first().attr("title","呵呵呵呵");
  9. 4、删除属性    
  10. 1）将属性值删除，属性名称仍然存在        
  11. $("img").first().attr("title","");    
  12. 2）将整个属性删除    
  13. $("img").first().removeAttr("title");

6.2 css属性:只针对标签中的class属性的操作

  1. 1、给指定标签添加class属性值    
  2. $("img").eq(1).addClass("current");
  3. 2、将指定标签中的class属性删除    
  4. $("img").first().removeClass("current");
  5. 3、判断一个标签中是否使用了指定的class属性名称
  6. $("img").first().hasClass("current");

6.3 文本、html和value值

  1. 1、html();和原生js中的innerHTML作用一致。    
  2. 1）如果在html括号中不给任何参数，则表示获取该表现下的子标签或者文本   
  3. var val = $("#commit").html();    
  4. 2）如果在html括号中给普通文本，表示将该标签的子标签或者文本替换成括号中的文本，如果括号中给的是标签，则将该标签下的子标签或者文本替换成新的标签。  
  5. $("#commit").html("<p>");
  6. 2、text();和原生js中的innerText作用一致
  7. 1）如果text括号中没有给参数，则表示获取两个标签之间的文本数据    
  8. var val = $("#commit").text();
  9. 2）如果text括号中给了参数，则表示将该标签之间的文本进行替换        $("#commit").text("222");
  10. 3、val();和原生js种的value属性作用一致    
  11. 1）如果val()括号里面不给参数，表示获取输入框中的值或则带有value属性的值 
  12. var val = $("#tel").val();    
  13. 2）如果val()括号里面有参数，白哦是给输入框赋值或者给带有value属性赋值
  14. $("#tel").val("000000");

七、文档操作

7.1 内部插入:在指定的父标签下，添加子标签

  1. 1、append() 在指定的父标签内部插入，并且是作为最后一个子标签
  2.     $("#out").append("<img src = '../img/cat1.jpg'>");
  3. 2、appendTo()在指定的父标签内部插入，并且是作为最后一个子标签
  4.     $("<img src = '../img/cat2.jpg'>").appendTo("#out");
  5. 3、prepend() 在指定的父标签内部插入，作为第一个子标签
  6.     $("#out").prepend("<img src = '../img/cat1.jpg'>");
  7. 4、prependTo()在指定的父标签内部插入，作为第一个子标签
  8.     $("<img src = '../img/cat2.jpg'>").prependTo("#out");

7.2 外部插入：在指定位置添加新的标签

  1. 1、after() 在指定的标签之后添加新的标签
  2.     $("#out").children().eq(1).after("<img src = '../img/cat1.jpg'>");
  3. 2、insertAfter() 在指定的标签之后添加新的标签
  4.     $("<img src = '../img/cat2.jpg'>").insertAfter("#out img:eq(1)");
  5. 3、before() 在指定的标签之前添加新的标签
  6.     $("#out").children().eq(1).before("<img src = '../img/cat1.jpg'>");
  7. 4、insertBefore()在指定的标签之前添加新的标签
  8.     $("<img src = '../img/cat2.jpg'>").insertBefore("#out img:eq(1)");

7.3 包裹:将已经存在的标签，用新标签将其包裹

  1. 1、wrap()
  2. $("#out").children().eq(2).wrap("<div>");

7.4 删除

  1. 1、empty(),将指定父标签下的所有子标签及内容清空
  2.     $("#out").empty();
  3. 2、remove(),将指定的标签删除
  4.     $("#out").children().eq(1).remove();

八、定时器

  1. //1、setTimeout(),网页打开之后，延迟一定时间才指定函数代码,只会执行一次
  2. //语法：setTimeout("函数名称()",时间毫秒单位)
  3. var timer = setTimeout("fun1()",5000);
  5. //清除定时器
  6. clearTimeout(timer);
  8. 2、setInterval()，在网页打开之后，每间隔一定时间就执行一次，直到定时器清楚
  9. //语法：setInterval("函数名称()",时间毫秒单位);
  10. var timer = setInterval("fun1()",3000);
  12. //清除定时器
  13. clearInterval(timer);

九、BOM对象

  1. 1、实际用到的文档对象document实际属于window对象
  2.     window.document.getElementById("");
  3. 2、弹出框输出
  4.     window.alert("");
  5. 3、弹出框输入
  6.     window.prompt();
  7. 4、获取当前浏览器body部分的高度和宽度
  8.     var width = window.innerWidth;
  9.     var height = window.innerHeight;
  10. 5、获取当前浏览器可见的高度和宽度
  11.     var w1 = window.screen.availWidth;
  12.     var h1 = window.screen.availHeight;