jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

bug超多的小姐姐

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量107

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46792892/article/details/114037269

版权

jQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

jQuery学习笔记

入口函数
- 执行时机：DOM元素渲染完毕，外部资源加载之前
- 格式：$(function(){
  //所有的代码都写在入口函数中
  })
- 入口函数和load事件区别：
  1. 执行时机不同；
  2. load事件只能定义一次，入口函数可以定义多次；
如何区分jQuery对象和普通JS对象
- jQuery对象本质：是伪数组，封装的js对象，操作jQuery对象就是操作jQuery对象中的每一个元素
- 只有通过$()括起来的才是jQuery对象，除此以外都是普通的JS对象
- jQuery对象和JS对象的相互转换：
  1. jQuery→JS对象通过索引 $("div")[0] / $("div").get(0)
  2. JS→jQuery对象通过$() $(person)
- 注意：jQuery对象的方法和JS对象的方法不通用
jQuery选择器
- 作用：定位DOM标签，获取DOM标签
- 格式：
- 分类：
  - 基本选择器：ID；类；标签； $("id名")、$("类名")、$("标签名")
  - 属性选择器：
    - $("[href]") 查询含有href属性的标签
    - $("[href]=‘#’") 查询含有href属性并且属性值为#的标签
    - $("a[href]=‘#’") 查询含有href属性并且属性值为#的a标签
  - 表单选择器：
    - 格式：$(":input标签的type属性的值")
    - $(":text") 表示获取type='text’的input标签
    - $(":password") 表示获取type='password’的input标签
    - $(":checkbox") 表示获取type='checkbox’的input标签
  - 值选择器：
    - :checked 用于获取选中的单选框或者复选框
      - $("[type='radio']:checked") ，$(": radio:checked")获取被选中的单选框
      - $("[type='checkbox']:checked") , $(":checkbox:checked")获取被选中的复选框
    - :selected 获取被选中的下拉框
      - $("select>option:selected") 获取被选中的下拉框option标签
  - 层级选择器：
    - $("div>h1") 获取子元素 (只有亲儿子)
    - $("div h1")获取后代元素 (包括儿子、孙子辈等)
  - 筛选选择器：
    - $("div:first") //获取第一个div
    - $("div:last") //获取最后一个div
    - $("div:eq(3)") //获取索引为3的div
    - $("div:odd") //获取索引为奇数的div
    - $("div:even") //获取索引为偶数的div
jQuery筛选方法
- 获取父元素
  - $("li").parent() //获取li标签的父标签
  - $("li").parents("选择器")//获取li标签的祖先元素，包括父辈，爷爷备，太爷爷…
- 获取直接子元素
  - $("ul").children("li") //获取ul标签下的li标签，只获取亲儿子标签，如果children()方法中不传入选择器，那么会查询所有的子元素
- 获取子孙元素(后代)
  - $("ul").find("li") //获取所有li标签，包括孙子辈的
- 获取兄弟元素
  - $("div").siblings() 表示获取所有的兄弟元素
  - $("div").siblings(“a”) 表示获取所有的兄弟元素,并且兄弟必须是a标签
  - $("li:eq(2)").prevAll() 获取li标签前面的兄弟元素
  - $("li:eq(2)").nextAll() 表示li标签后面的兄弟元素
- eq()
  - $("div").eq(2) 获取索引为2的div
- hasClass()
  - 判断是否包含类样式，如 $("div").hasClass("bg"),如果包含该样式返回true，否则返回false
jQuery的遍历
- 方式1 ：调用jquery对象的each方法
- 方式2：调用jquery类的静态each方法$.each
- 区别：方式1中调用对象必须是jQuery对象，方式2中调用对象可以是jQuery对象也可以是js对象
- 区别案例：

 $(function () {
            var arr = ["pink", "red", "yellow", "blue"];
            //方式1 ：调用jquery对象的each方法
            $(arr).each(function (index, element) {
                console.log("索引：" + index + ",对应的数据：" + element);
            })
            //方式2：调用jquery类的静态each方法$.each
            $.each(arr, function (index, element) {
                console.log("索引：" + index + ",对应的数据：" + element);
            })
        })

操作样式
- 设置样式
  - $("div").css("样式名","样式值");//只能操作一个样式，如果想要操作多个样式需要多次调用css方法
  - ```
    	$("div").css({
    		 width:"100px",
    		height:"100px",
     		"background-color":"red"
    	})//可以同时设置多个样式
```
- 获取样式 var width = $("div").css("width")
- 操作类样式操作类样式
  - 前提，必须得有一个已经存在的类样式，类样式以.开头，比如.dv{}
  - $("div").addClass("dv") //添加类样式
  - $("div").removeClass("dv") //删除类样式
  - $("div").toggleClass("dv") //如果div有dv样式就删除，如果没有就添加

动画

显示和隐藏

   显示
  		show(动画的时间,function(){
  	  		动画执行完毕后执行该方法
  		})

   隐藏
  		hide(动画的时间,function(){
  	 		 动画执行完毕后执行该方法
  		})

  	切换
  		toggle(动画的时间,function(){
  	  		动画执行完毕后执行该方法
  		})

卷帘门/滑动显示和隐藏

   显示
  	slideDown(动画的时间,function(){
    			动画执行完毕后执行该方法
  		})

   隐藏
  slideUp(动画的时间,function(){
  			动画执行完毕后执行该方法
  		})

  	切换
  		slideToggle(动画的时间,function(){
  			动画执行完毕后执行该方法
  		})

淡入淡出

  显示
  		fadeIn(动画的时间,function(){
  			动画执行完毕后执行该方法
  		})

  隐藏
  		fadeOut(动画的时间,function(){
  	  		动画执行完毕后执行该方法
  		})

  切换
  		fadeToggle(动画的时间,function(){
  	  		动画执行完毕后执行该方法
  		})

  变到指定的透明度
  		fadeTo(动画执行的时间,目标透明度,function(){
  	   		动画执行完后要执行的内容
  		})

自定义动画
- animate(目标样式,动画执行所需要的时间,回调函数);
结束动画
stop()结束未执行完毕的代码，调用动画相关的方法之前调用stop()方法，如$("div").stop().fadeIn();

DOM元素的增删改查
创建 var div = $("<div><div>");
添加
- 在指定元素内部添加
  - 父元素.append(子元素)/ 子元素.appendTo(父元素)
  - 父元素.prepend(子元素)/ 子元素.prependTo(父元素)
- 在指定元素前面和后面添加
  - 指定元素.after(新元素) 把新元素添加到指定元素的后面
  - 指定元素.before(新元素) 把新元素添加到指定元素的前面
  - $(content).insertAfter(selector) 在selector之后插入content（ HTML 标记或已有的元素）
  - $(content).insertBefore(selector) 在selector之前插入content（ HTML 标记或已有的元素）
- 创建并添加新元素到div中的代码
  - var span = $("<span>我是新添加的span标签</span>")；$("div").append(span);
  - $("div").append("<span></span>") //简写
- 删除
  - remove() 标签中的内容和自己全部干掉
  - empty() 只把标签中的内容干掉
jQuery尺寸相关的方法
- width()/height() 获取元素内容的宽度和高度不包含padding margin border的值
- innerWidth()/innerHeight() 获取元素的宽度和高度，包含了padding
- outerWidth()/outerHeight() 获取元素的宽度和高度，包含padding,margin,border
操作标签中的内容和value值
- 操作标签中的内容
  - 纯文本内容
    - text(“值”) 设置 $("div").text("哈哈") 将div中的数据变成哈哈
    - text() 获取 var t = $("div").text();
  - html内容
    - html("html代码") 设置
    - html() 获取
- 操作value属性的值
  - $("input").val() 获取输入框的值
  - $("input").val("你好"); 设置输入框的值
jQuery位置相关的方法
$(".small").offset() 获取该元素相对于document顶部的left和top值，返回值为伪数组，$(".small").offset().top获取距离文档顶部的距离值
$(".small").position() 获取该带定位元素相对于最近带定位的父级元素的偏移量，返回值是伪数组，$(".small").position().top获取距离当前元素父级顶部的距离值
页面滚动相关方法
$(window).scroll(); 页面滚动事件
$(document).scrollTop()获取页面滚出浏览器的距离
$("html,body").animate({scrollTop:300})设置页码滚出多出去多少距离
操作属性
- 原始属性(W3C规定的标签可以具备的属性)
  - <a href="">
  - <img src="">
  - <div href=""></div> href不是div的原始属性
  - 设置
    - prop("属性名","属性值")比如 $("a").prop("href","http://www.baidu.com")
  - 获取
    var p = prop("属性名")比如获取a连接的href属性的值var p = $("a").prop("href")
- 自定义属性(自己规定的属性)
  - <a index="">
  - 设置
    * attr("属性名","属性值")比如给a连接添加属性xxx $("a").attr("xxx","呵呵")
  - 获取
    - var p = attr("属性名")比如获取a链接的xxx属性的值 $("a").attr("xxx")
- 向标签对象中存储数据
  - (该数据不会展示到页面，存储在浏览器的内存中)
  - 设置 data("名字","值")
  - 获取 var p = data("名字")
jQuery中的鼠标移入和移出事件

jquery中的鼠标移入和移出

最笨的写法

  $("div").mouseover(function(){ 
  	 鼠标移入要做的事情
  })
  $("div").mouseout(function(){ 
  	 鼠标移出要做的事情
  })

通过jquery提供的hover方法优化上面代码，合并成一个

  $("div").hover(function(){
  	   鼠标移入要做的事情
  	},function(){
  	   鼠标移出要做的事情
  	});

如果鼠标移入和移出做的事情一样，那么传入一个function即可
- ```
  $("div").hover(function(){

  	});
```

相关概念
- 隐式迭代
  - 迭代：遍历
  - 隐式：隐藏
  - 方法内部进行遍历，对于方法的调用者来讲，就把遍历隐藏起来了，所以叫做隐式迭代
  - 举例
    $("div").css("width","100px") 给所有的div设置宽度，底层会遍历，一个一个的给div设置宽度
- 排他思想操作自己的同时，操作兄弟元素
- 链式编程
  - jquery的方法在执行完毕后都会返回一个jquery对象，我们可以继续操作返回值的方法
  - $("div").css("width","100px").css("height","100px")