您的位置: 首页  >  IT文章  >  JQ总结 什么是jQuery？ jQuery学什么？ 使用注意事项 基础语法 JQ对象和JS对象的转化 选择器 样式操作(原生DOM和jQuery实现标签红绿变幻) 样式操作 位置操作 尺寸 文本操作 属性操作 文档处理 事件

JQ总结 什么是jQuery？ jQuery学什么？ 使用注意事项 基础语法 JQ对象和JS对象的转化 选择器 样式操作(原生DOM和jQuery实现标签红绿变幻) 样式操作 位置操作 尺寸 文本操作 属性操作 文档处理 事件

分类: IT文章 • 2022-05-22 20:01:37
  • 是一个工具，简单方便实现DOM操作
  • python里可能叫模块贴切一点，但在前端叫"类库"

jQuery学什么？

  • 查找标签
  • 修改属性样式
  • 事件
  • Ajax异步请求
  • 插件机制

使用注意事项

  • 一定要先导入后使用

基础语法

$(selector).action()

// 样式演变，原本应该
jQuery();
// 为了简化
$();

JQ对象和JS对象的转化

var  dEle = $('.d1')[0];  //将JQ对象转化为JS对象
$(dEle) 将JS对象转化为JQ对象

选择器

层级选择器

  • 层级选择器

    后代

    儿子

    毗邻

    弟弟

基本筛选器

// 用ul标签举例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')

// 最后一个has的玩法需要写个三个div
// 一个空div
// 一个儿子有a标签
// 一个儿子没有a，孙子有a标签
$('div:has(a)')

样式操作(原生DOM和jQuery实现标签红绿变幻)

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

表单筛选器

# 针对表单内的标签
$('input[type="text"]')
# 简化写法
$(':text')

# 找到所有被选中的checkbox
$(':checkbox')  # 注意select框中默认selected标签也会被找到
$('input:checkbox')

筛选器方法

# 避免$('input:first')太麻烦
$('input').first()

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

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

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

样式操作

样式类相关

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

CSS相关

css("color","red")//DOM操作：tag.style.color="red"

示例：

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

例如：

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

设置值：

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

示例：

获取被选中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" >
<label for="c2">男</label>
<input name="gender" >

可以使用：

$("input[name='gender']:checked").val()

属性操作

用于ID等或自定义属性使用attr：

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

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

文档处理

添加到指定元素内部的后面

$(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()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

例子：

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()
replaceAll()

克隆

clone()// 参数

取消标签默认的绑定事件

第一种：
$('input').click(function (e) {
        alert('123');
        e.preventDefault();
    })
第二种
return False

解决事件冒泡

事件冒泡：当一个标签中绑定的事件执行之后，会向上一级标签汇报，他有没有这个点击事件，如果有就会执行，并且传给下一级。

利用stoppropagtion方法，解决事件冒泡

事件委托

将一事件委托给一个标签，当标签即使是被动态创建出来，也能拥有这个事件。

  // 事件委托
    $('body').on('click','button',function () {
        alert(123)
    })

事件

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

事件绑定

  1. .on( events [, selector ],function(){})
  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

移除事件

  1. .off( events [, selector ][,function(){}])，off() 方法移除用 .on()绑定的事件处理程序。
  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button >点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

动画效果

// 基本

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])

相关推荐