适合初学者的一篇关于jQuery教程

最新推荐文章于 2024-09-30 15:42:36 发布

2401_86358943

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量696

点赞数 3

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2401_86358943/article/details/142154959

版权

==================================================================

$() 方法获取到的内容叫做 jQuery 对象
内部封装了大量的属性和方法，比如 .css() 和 .html() 和 .animate() 等方法都是 jQuery 对象的方法
通过 $() 获取的元素是一组元素，进行操作时是批量操作

JQ对象和原生对象的转换

======================================================================

jQuery 对象得到后，只能使用 jQuery 对象的方法，不能使用原生 js 元素对象的方法
原生 js 对象也不能使用 jQuery 的方法
jQuery 对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的 jQuery 的方法和属性

jQuery 对象中原生 js 对象的个数

$().length
$().size

互相转换

jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象
原生转 jQuery：将原生对象用 $() 方法包裹即可

jQuery选择器

===================================================================

CSS2.1 和 CSS3 选择器

参数：必须是字符串格式的选择器

筛选选择器

也叫过滤选择器，jQuery 中新增的自己的选择器
用法：在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。或者可以作为高级选择器的一部分

html() 方法

===================================================================

html() 方法相当于原生 JS 中的 innerHTML 属性，用来获取或设置标签内部内容

方法可以传递一个参数，自定义的字符串内容

获取：文本和内部标签
- 语法：jQuery对象.html();
设置：若设置标签时，标签会被渲染
- 语法：jQuery对象.html("文本内容");

text() 方法

===================================================================

text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字

获取：仅仅是文本
- 语法：jQuery对象.text();
设置：若设置标签时，标签会被当做普通文本
- 语法：jQuery对象.text("文本内容");

val() 方法

==================================================================

val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容

获取：表单元素的 value
- 语法：jQuery对象.val();
设置：表单元素的 value
- 语法：jQuery对象.val("文本内容");

attr() 和 removeAttr() 方法

==================================================================================

attr() 方法

attr：全称 attribute 属性的意思，用来获取或设置标签的属性值

设置标签的属性
- 语法：jQuery对象.attr(name, value);
获取标签属性值
- 语法：jQuery对象.attr(name);

removeAttr() 方法

作用：移除标签的熟悉
- 语法：removeAttr(name);

prop() 方法

===================================================================

针对：selected、checked、disabled等表单元素的属性。此类属性的属性值与属性名相同

获取
- 语法：$('input').prop('属性名')
设置
- 语法：$('input').prop('属性名', 值)

css() 方法

==================================================================

jQuery 对象有一个 css() 的方法，用于调用 css 属性值或者更改 css 属性值
语法： jQuery 对象.css(name, value);
参数1：字符串格式的 css 样式属性名
参数2：设置或更改的属性值

注意

一个参数：表示调用 css 属性的值，得到的是某个元素的计算后样式，值为字符串格式
两个参数：表示设置 css 样式属性，第二个参数可以是字符串格式的属性值，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串
css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法
可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式，传给 css() 的参数

操作类名方法

================================================================

addClass() 添加类名
- 语法：jQuery对象.addClass('类名');
- 参数：字符串格式的类名
removeClass() 移除类名
- 删除指定的类名
- 语法：jQuery对象.removeClass();
- 参数：字符串格式的类名
- 不传参数，表示删除所有的类名
toggleClass() 类名切换
- 若这个类名存在，则会移除该类名。否则添加该类名
- 语法：jQuery对象.toggleClass('类名');
- 参数：字符串格式的类名
- 优点：三个方法只操作参数部分的类名，不影响原有的其他类名

类名判断方法 hasClass

=========================================================================

语法：jQuery对象.hasClass('类名');
返回值：true 和 false

jQuery 常用事件方法

=======================================================================

jQuery 对象封装了一系列的事件方法
事件方法与原生 JS 事件方法名称类似，不需要写 on
事件方法需要 jQuery 对象打点调用，小括号内的参数是事件函数
例如点击事件：click()

mouseenter() 方法

jQuery 中有自己的事件方法
鼠标进入一个元素触发的事件

mouseleave() 方法

jQuery 中有自己的事件方法
鼠标离开一个元素触发的事件

对比

注意：mouseenter 和 mouseleave 没有事件冒泡

在使用时替换 mouseover 和 mouseout 更加合适

hover() 方法

hover 事件相当于将注意：mouseenter 和注意：mouseleave 事件进行了合写
参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数

节点关系查找方法1

===================================================================

$(this) 自己

在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法

parent() 父级

jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级
父级得到的也是一个 jQuery 对象，直接继续打掉调用 JQ 方法和属性

children() 子级

jQuery 对象内部有一个 children() 方法，可以得到自己的所有子级元素组成的 jQuery 对象
得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性
获得子级时，不限制标签类型
children() 可以传参数：参数是字符串格式的选择器，在选择中所有子级的情况下，保留满足选择器的部分，进行二次选择

siblings() 兄弟

jQuery 对象通过调用 siblings() 方法可以的道出了自己以外的所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟
得到 jQuery 对象可以继续使用 JQ 的方法和属性
siblings() 方法得到的 jQuery 对象可以进行二次选择，通过给参数传递字符串格式的选择器

链式调用

==============================================================

jQuery 对象调用任何方法（除了节点关系方法）执行完后，方法都会有一个返回值，返回值就是 jQuery 对象自己，这个现象给我们提供了便利，可以对执行结果继续打点调用 JQ 的方法和属性
可以使用 jQuery 对象进行连续打点调用

其他节点关系方法

==================================================================

find() 后代元素

jQuery 对象可以利用 find() 方法，穿第一个参数，参数部分规定的选择器，查找范围是 jQuery 对象的所有后代
参数是字符串格式的选择器

兄弟元素

紧邻的兄弟元素方法

next() 下一个兄弟
prev() 前一个兄弟

多选方法

nextAll() 后面所有兄弟
prevAll() 前面所有兄弟
通过传递参数可以进行二次选择，参数是字符串格式的选择器，在前面或后面兄弟中选中符合选择器规定的部分

parents() 祖先级

通过该方法得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象

通过传参进行二次选择，参数位置是字符串格式的选择器

eq() 大排序

==================================================================

jQuery 中获得的对象，内部包含选择的一组与安生 JS 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系
eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标

index() 在兄弟中的排序

=========================================================================

jQuery 对象调用 index() 方法时，得到的是它自己在 HTML 结构中的兄弟中的下标位置，与 jQuery 大排序没有关系


	var $ps = $("p");

	// index() 方法获取下标时，排序跟新生成的 jQuery 对象无关

	// 它依赖于自身元素在父级中同级元素之间的位置

	// 添加点击事件

	$ps.click(function () {

		// 点击输出自己的 index() 的值

		console.log($(this).index())

	})

排他思想、简易 tab 栏

=======================================================================

Tab 栏特效中的排他

自己的级别的排他：给自己 this 添加 current 类名，让其他兄弟删除 current 类
对应的部分的排他：给对应位置的元素添加 current，其他的兄弟删除 current 类
找对应关系，使用的是自己的 index() 下标，让另一组中下标相同的项作为对应项
通过选中另一组的对应项利用 eq() 方法选择下标项

each() 遍历

===================================================================

参数是一个函数
作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作
each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作

优点

each的函数内部，也有一个this，指向的是进来遍历的每一次的元素
each的函数可以传一个参数i, i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置


    // 选择所有的 p 标签

		var $ps = $(".box p")

		// 添加点击事件

		// $ps.click(function () {

		// 	// 获取元素在自己的父级中 兄弟间的下标

		// 	console.log($(this).index())

		// })

		// 通过each 方法进行操作

		$ps.each(function (i) {

			// i 记录的是这一次遍历时当前元素在 jQuery 对象大排序中的位置

			$(this).click(function () {

				// 这个内部的this 就是事件源

				console.log(i);

				console.log($(this).index())

			})



		})

表格格列变色

================================================================


    // 选中偶数的列，变色

    $("td:even").css("background","skyblue")



    // 可以将每一行作为单独操作单位，让每一行中的列进行隔列变色

    // 我们一提到对某个元素内部或内部的子元素进行一些操作，首先想到 each 方法

    var $tr = $("tr");

    $tr.each(function () {

      // 让子级所有的列隔列变色

      $(this).children(":odd").css("background","skyblue")

    })



    // 方法2

    $("td").each(function () {

      // 可以判断 当前这个 td 在父级中所处的位置

      // index() 

      if ($(this).index() % 2 === 0) {

        $(this).css("background","skyblue")

      }

    })

jQuery 入口函数

=====================================================================


    // onload 事件在加载时，指的是页面中多有的资源【DOM树、音频、视频、图片等】加载完毕后，才能触发

    // 一个页面中只能出现一次

    window.onload = function () {

        console.log(1);

        var btn = document.getElementsByTagName("input")[0];

        console.log(btn);

       };



    // jQuery 中的入口函数

    // 仅仅需要等待页面中的 DOM 树加载完毕就可以执行了

    $(document).ready(function () {

        console.log(2);

        var btn = document.getElementsByTagName("input")[0];

        console.log(btn);

    })



    // 简化

    // 在一个页面中，可以书写多个 jQuery 的入口函数，执行顺序按照前后加载顺序执行

    $(function () {

        console.log(3);

        var btn = document.getElementsByTagName("input")[0];

        console.log(btn);

   })

    // $(function () {



    // })

show() 和 hide() 方法

============================================================================

hide()：元素隐藏，隐藏的前提必须是元素 display:block;
sgow()：元素显示，显示的前提必须是元素 display:none;
toggle()：在元素隐藏和显示之间进行切换
这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画

参数

如果不传参数：直接显示和隐藏，没有过渡动画
如果传递参数：
- 单词格式：“slow”, “normal”, “fast”
- 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画
过度时间内，伴随着宽度和高度以及透明度的变化


    // 获取元素

    var $pic = $("#pic")

    var $btn1 = $("#btn1")

    var $btn2 = $("#btn2")

    var $btn3 = $("#btn3")



    // 添加点击事件，让图片实现显示和隐藏

    $btn1.click(function () {

        // $pic.hide("slow");

        $pic.hide(1000);

    })

    $btn2.click(function () {

        $pic.show("normal");

    })

    $btn3.click(function () {

        $pic.toggle("fast");

    })

slideDown() 和 slideUp() 方法

====================================================================================

slideDown()：滑动显示（方向不一定）
slideUp()：滑动隐藏
slideToggle()：滑动切换
让元素在 display 属性的 block 和 none 之间进行切换

参数

如果不传参数：默认的过渡时间为 400毫秒
如果传递参数：
- 单词格式：“slow”, “normal”, “fast”
- 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画

注意

如果元素没有设置过宽高就不会出现滑动的效果
如果元素设置了高度和宽度，会进行上下垂直方向的滑动
动画效果：高度属性在0到设置值之间的变化，没有透明度动画
如果元素设置了定位，偏移量方向如果是 bottom 参与了，滑动方向会发生变化


    // 获取元素

    var $pic = $("#pic")

    var $btn1 = $("#btn1")

    var $btn2 = $("#btn2")

    var $btn3 = $("#btn3")



    // 添加点击事件，让图片实现滑动显示和隐藏

    $btn1.click(function () {

      $pic.slideUp(1000)

    })

    $btn2.click(function () {

      $pic.slideDown(1000)

    })

    $btn3.click(function () {

      $pic.slideToggle(1000)

    })

fadeIn() 和 fadeOut() 方法

=================================================================================

fadeIn()：淡入，透明度逐渐增大最终显示
fadeOut()：淡出，透明度逐渐降低最终隐藏
fadeToggle()：切换效果
fadeTo()：淡入货单出到某个指定的透明度
动画效果，执行的是透明度动画，也是在 display 属性的 block 和 none 之间切换

参数

如果不传参数：默认的过渡时间为 400 毫秒
如果传递参数：
- 单词格式：“slow”, “normal”, “fast”
- 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画


    // 获取元素

    var $pic = $("#pic")

    var $btn1 = $("#btn1")

    var $btn2 = $("#btn2")

    var $btn3 = $("#btn3")

    var $btn4 = $("#btn4")



    // 添加点击事件，让图片实现淡入显示和淡出隐藏

    $btn1.click(function () {

      $pic.fadeOut("slow")

    })

    $btn2.click(function () {

      $pic.fadeIn(1000)

    })

    $btn3.click(function () {

      $pic.fadeToggle()

    })

    $btn4.click(function () {

      $pic.fadeTo(500,0.5)

    })

animate() 动画方法

========================================================================

作用：执行 CSS 属性集的自定义动画
语法：$(selector).animate(styles, speed, easing, callback);
参数1：css 的属性名和运动结束位置的属性值的集合
参数2：可选，规定动画的素的，默认的是"normal"。其他值：“slow”,“normal”,“fast”，数字格式，单位为毫秒
参数3：可选，规定在不同的动画点中设置动画速度的 easing 函数，值包含 swing 和 linear
参数4：可选，animate 函数执行完之后，要执行的函数

动画排队

==============================================================

同一个元素对象身上，如果定义了多个动画，动画会排队等待执行
如果是不同的元素对象都有动画，不会出现排队机制
如果是其他的非运动的代码，也不会等待运动完成
之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队
同一个元素身上的运动，可以简化成链式调用的方法

动画延迟 delay()

======================================================================

delay：延迟的意思
将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后在执行，有延迟运动的效果
参数：时间的数值，表示延迟的时间
除了 animate 方法之外，其他的运动方法也有延迟效果

stop() 停止动画

=====================================================================

stop()作用：设置元素对象身上的排队的动画以何种方式进行停止。
有两个参数，都是布尔值
参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 flase 表示不清空至停止当前的一个动画
参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 flase 表示不完成当前动画，立即停止在当前位置


    var $box1 = $(".box1");

    var during = 2000;

    // box1 有四个运动进行排队

    $box1.animate({"left" : 500},during);

    $box1.animate({"top" : 500},during);

    $box1.animate({"left" : 0},during);

    $box1.animate({"top" : 30},during);



    // 添加按钮点击事件

    // 清空动画，走到结尾

    $("#btn1").click(function () {

        $box1.stop(true,true)

    })



    // 清空动画，停在当前

    $("#btn2").click(function () {

        $box1.stop(true,false)

    })



    // 不清空后面的动画，当前运动立即走到结尾

    $("#btn3").click(function () {

        $box1.stop(false,true)

    })



    // 不清空后面的动画，当前运动立即停止在当前位置

    $("#btn4").click(function () {

        $box1.stop(false,false)

    })



    // 在实际工作中，一般要求会清空后面的动画，当前动画要停止在当前的位置

    // 更多时候使用 stop(true)

清空动画排队

================================================================