jQuery快速入门

Posted 2021-01-08 sunch

　　转自  https://www.cnblogs.com/liwenzhou/p/8178806.html

为什么要用jQuery

做同样的事,jQuery写起来极其简练
jQuery相当于javascript的第三方模块(原生的DOM是基础)

 jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发Ajax程序

学习内容

0,查找标签/属性
1,改变标签
2,改变标签中的属性
3,改变标签的样式
4,事件相关
5,动画效果
6,其他方法

导入jQuery

<script src="jquery-3.2.1.min.js"></script>

推荐在body的最下面导入

jQuery对象和DOM对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是 jQuery独有的。
如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

约定

我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]                //jQuery对象转成DOM对象

例子

$("#i1").html();            //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;        // DOM对象使用DOM的方法

互转

jQuery对象     --> DOM对象            jQuery对象[0]        用索引取出具体的标签,则变成DOM对象
DOM对象     --> jQuery对象        $(DOM对象)            用$包住DOM对象,则变成jQuery对象

查找

可以查找到的

标签
标签的属性
表单对象属性

基本选择器

标签选择器        $("tagName")
id选择器        $("#id")
class选择器        $(".className")

配合使用        $("div.c1")                      // 找到有c1(class类)的div标签
通用选择器        $("*")
组合选择器        $("#id, .className, tagName")    // 符合其一,即可找出来

层级选择器

x和y可以为任意选择器

$("x y");        // x的所有后代y（子子孙孙）
$("x > y");        // x的所有儿子y（儿子）
$("x + y");        // 找到所有紧挨在x后面的y
$("x ~ y");        // x之后所有的兄弟y

属性选择器

[attribute]
[attribute=value]    // 属性等于
[attribute!=value]    // 属性不等于

例子

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type=‘checkbox‘]");    // 取到checkbox类型的input标签
$("input[type!=‘text‘]");        // 取到类型不是text的input标签    

基本筛选器

:first                 // 第一个
:last                 // 最后一个
:eq(index)            // 索引等于index的那个元素
:even                 // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd                 // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)            // 匹配所有大于给定索引值的元素
:lt(index)            // 匹配所有小于给定索引值的元素
:not(元素选择器)    // 移除所有满足not条件的标签
:has(元素选择器)    // 选取所有包含(一个或多个)标签在其内的标签(指的是从后代元素找)    

例子

$("div:first")        // 找到所有的div,只留下第一个

$("div:has(h1)")    // 找到所有后代中有h1标签的div标签
$("div:has(.c1)")    // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")    // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

表单筛选器

表单属性

其实也可以通过属性选择器找到,但是通过表单筛选器更高效

:text            普通输入框
:password        密码输入框
:file            文件输入框
:radio            单选框
:checkbox        多选框

:submit            提交按钮
:reset            刷新按钮
:button            普通按钮

例子

$(":checkbox")              // 找到所有的checkbox
$("#id3 input:checkbox")    // 找到【id3的内部】的所有checkbox

表单对象属性

:enabled        可用
:disabled        不可用
:checked        被选中的checkbox
:selected        被选中的下拉菜单

例子

$("input:enabled")          // 找到可用的input标签
$(":selected")              // 找到所有被选中的option

jQuery对象的筛选方法

可以通过这些方法达到筛选的效果

.next()                // 下一个
.nextAll()            // 下一个所有
.nextUntil("#i2")    // 下面,直到往后找到#i2为止    (不包含#i2)

.prev()                // 前一个
.prevAll()            // 前一个所有
.prevUntil("#i2")    // 前面,直到往后找到#i2为止    (不包含#i2)

.parent()            // 父标签
.parents()          // 查找当前元素的所有的父辈元素
.parentsUntil()     // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

.children();        // 儿子们
.siblings();        // 兄弟们

.find("p");            // 从【结果集】中搜索所有与指定表达式匹配的元素。
.filter(".c1")      // 从【结果集】中过滤出有c1样式类的

.first()             // 获取【结果集】的第一个元素
.last()             // 获取【结果集】的最后一个元素
.not()                 // 从【结果集】中删除与指定表达式匹配的元素
.has()                 // 从【结果集】中保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()                 // 索引值等于指定值的元素

例子

$("#id1").next()    // 找到id为id1的下一个元素

操作

文档操作

$(A).append(B)        // 把B追加到A内部的最后
$(A).appendTo(B)    // 把A追加到B内部的最后

$(A).prepend(B)        // 把B前置到A内部的最前
$(A).prependTo(B)    // 把A前置到B内部的最前

$(A).after(B)            // 把B放到A的后面
$(A).insertAfter(B)        // 把A放到B的后面

$(A).before(B)            // 把B放到A的前面
$(A).insertBefore(B)    // 把A放到B的前面

.remove()                // 删除整个标签
.empty()                // 清空标签的内部

$(A).replaceWith(B)        // B替换所有A
$(A).replaceAll(B)        // A替换所有B

.clone()                // 克隆

append/prepend/after/before的B可以直接写文本, 例如:$("#id1").append("<p>段落1</p>")　　// 在id为id1的内部添加文本

示例

$("#id2").append(divEle)        // 在id为id2的内部的最后添加divEle
$(pEle).appendTo($("#id2"))        // 把pEle添加到#id2的内部的最后
$("#id1").clone().insertAfter($("#id1"))        // 克隆一个id为id1的标签并把它插入到它本身的后面
$("div").replaceWith("<div>new world</div>")    // <div>new world</div>替换掉div

$("#id1").append("<p>段落1</p>")            // 在id为id1的内部添加文本
$("div").append("hello")                    // 在所有div的内部添加hello文本

样式操作

.addClass();        // 添加指定的CSS类名。
.removeClass();        // 移除指定的CSS类名。
.hasClass();        // 判断样式存不存在
.toggleClass();        // 切换CSS类名，如果有就移除，如果没有就添加。

示例

$("#id1").addClass("c2")        // 找到id为id1的元素,添加样式c2

属性操作

自定义属性

用于id等或自定义属性

.attr(attrName)                // 【查找】返回第一个匹配元素的属性值
.attr(attrName, attrValue)    // 【设置】为所有匹配元素设置一个属性值
.attr({k1: v1, k2:v2})        // 为所有匹配元素设置多个属性值
.removeAttr()                // 【删除】从每一个匹配的元素中删除一个属性

例子

$("#id3").attr("class")        // 返回id为id3的class的属性值

判断属性值

用于checkbox和radio

.prop()             // 获取属性    --> 返回布尔值
.removeProp()         // 移除属性

prop和attr的区别

attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性;
可以认为attr是显式的，而prop是隐式的

例子

<input type="checkbox" id="i1" value="1">

// 针对上面的代码，
$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

位置操作

.offset()            // 获取匹配元素在当前窗口的相对偏移或设置元素位置
.position()            // 获取匹配元素相对父元素的偏移
.scrollTop()        // 获取匹配元素相对滚动条顶部的偏移
.scrollLeft()        // 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例

$("div").offset()                        // 获取第一个div的相对偏移
$("#id1").offset({top: 20, left: 20})    // 【建议】通过找id再设置相对偏移
$("div").offset({top: 20, left: 20})    // 这样会设置【所有】找到的div的相对偏移

尺寸操作

.height()            内容 高
.width()            内容 宽
.innerHeight()        内容 高 + padding
.innerWidth()        内容 宽 + padding
.outerHeight()        内容 高 + padding + border
.outerWidth()        内容 宽 + padding + border

示例

$("div").height()        //【获取】第一个div的高
$("#id1").height(50)    // 【设置】id为id1的高

文本操作

.html()     // 【获取】第一个匹配元素的html内容
.html(val)    // 【设置】所有匹配元素的html内容    --> 要设置的内容写在()内

.text()        // 【查找】取得所有匹配元素的内容
.text(val)    // 【设置】设置所有匹配元素的内容    --> 要设置的内容写在()内

.val()        // 【查找】取得第一个匹配元素的当前值
.val(val)    // 【设置】设置所有匹配元素的值
.val([val1, val2])    // 设置【多选】的checkbox　或者【多选】select的值

例子

$("[name=‘hobby‘]").val([‘basketball‘, ‘football‘]);
$("#s1").val(["1", "2"])
$("input[name=‘gender‘]:checked").val()    // 获取被选中的checkbox或radio的值

事件

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

绑定事件

jQuery对象.on( 事件 [selector ],function(){})

events： 事件
selector: 选择器（可选的）
function: 事件处理函数

阻止后续事件执行

return false;

事件委托

适用于给未来的元素绑定事件(页面生成的时候还没有的标签);
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件.

$("table").on("click", ".delete", function () {
          // 删除按钮绑定的事件(包括未来的删除按钮)
        })

页面载入

等待DOM数加载完成

两种写法

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写

$(function(){
// 你在这里写你的代码
})

动画效果

// 基本
.show([s,[e],[fn]])
.hide([s,[e],[fn]])
.toggle([s],[e],[fn])
// 滑动
.slideDown([s],[e],[fn])
.slideUp([s,[e],[fn]])
.slideToggle([s],[e],[fn])
// 淡入淡出
.fadeIn([s],[e],[fn])
.fadeOut([s],[e],[fn])
.fadeTo([[s],o,[e],[fn]])
.fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
.animate(p,[s],[e],[fn])

补充

each方法

相比for循环更简单

第一种方式

$divEle.each(function(){})

第二种方式

$.each(DOM对象,function(){})

例子

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);        //index是索引，ele是每次循环的具体元素。
})

后续的each循环不进行

return false;

退出当前这一次循环

return;

data方法

.data(key, value)        // 给【结果集】中的所有标签存储相关的数据(或jQuery对象)
.data(key)                // 返回【结果集】中第一个标签的key
.removeData(key)        // 移除存放在元素上的数据，不加key参数表示移除所有保存的数据

例子

$("div").data("k",100);        // 给所有div标签都保存一个名为k，值为100
$("div").data("k");            // 返回第一个div标签中保存的"k"的值
$("div").removeData("k");   // 移除元素上存放k对应的数据

插件(了解即可)

给【jQuery对象】扩展一个自定义方法

$.fn.extend({"方法名":function(){...}})

给【jQuery】扩展自定义方法

$.extend({"方法名":function(){...}})