jQuery总结

最新推荐文章于 2024-10-02 05:39:15 发布

霹雳桃

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量759

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46087056/article/details/123852614

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

jQuery

jQuery 实现了一套与原生 js 一样的方法处理，只不过方法缩短内容，更简易，使用多个浏览器
要想使用 jQuery 就必须使用 jQuery 对象，不能使用 DOM 对象操作 jQuery 方法

一、jQuery 对象和 DOM 对象

$() === function jQuery(){}
$("div") === document.querySelectorAll("div")

DOM 转换 jQuery

var divs = document.querySelector('div');
$(divs); // DOM 变成 jQuery

jQuery 转换 DOM

1.$("div")[0]
2.$("div").get(0)
3.Array.from($("div"))

二、选择器

$(‘div’);
- 获取标签是 div 的元素
$(’.div1’);
- 获取类名是 div1 的元素
$(’#div1’);
- 获取 id 是 div1 的元素
$(‘div.div1’);
- 获取标签是 div 并且类名是 div1 的元素
$(‘div .div1’);
- 获取父元素标签是 div 并且类名是 div1 的子代元素
$(’.div1+.div2’);
- 获取类名是 div1 的下一个类名是 div2 的兄弟元素
$(’.div1~div’);
- 获取标签是 div 的之后类名是 div1 的兄弟元素
$(’.div1>.div2’);
- 获取类名是 div1 的类名是 div2 的直接子代元素
$(‘div[name]’);
- 获取包含 name 属性的元素
$(‘div[name=a]’);
- 获取属性包含 name 并且值是 a 的元素
$(‘div[name!=a]’);
- 获取属性包含 name 并且值不是 a 的元素
$(‘div[name^=a]’);
- 获取属性包含 name 并且值是以 a 开头的元素
$(^{'} d i v [n a m e$ =a]’);
- 获取属性包含 name 并且值是以 a 结束的元素
$(‘div[name*=a]’);
- 获取属性包含 name 并且值包含 a 的元素
$(‘div[name|=a]’);
- 获取属性包含 name 并且值是 a 或者值是 a 起头的后面紧跟连接符(-) 的元素
$(‘div[name~=a]’);
- 获取属性包含 name 并且值是 a 或者 name 中有 a 并且前后用空格区分的元素

三、过滤器

$(“li:first”)
- 把所有 li 放在一个列表里，选择这个列表的第一个
$(“li:first-child”)
- 选择当前选择器父元素的第一个子元素,如果是 li 就选择,如果不是就不选择
$(“li:first-of-type”)
- 选择当前选择器父元素的第一个是 li 的子元素,如果第一个不是就往下寻找
$(“li:last”) - 同 first
$(“li”).last() - 同 first
$(“li:last-child”) - 同 first
$(“li:last-of-type”) - 同 first
$(“li:nth-child(1)”)
- 选择当前选择器父元素的第二个子元素的所有 li 元素
$(“nth-of-child(1)”)
- 选择当前选择器附院四的第二个 li 子元素的所有 li 元素
$(“li:even”)
- 所有偶数 li 元素,从 0 开始
$(“li:odd”)
- 所有奇数 li 元素,从 0 开始
$(“li:eq(3)”)
- 选择第 3 个 li 元素
$(“li”).eq(3)
- 选择第 3 个 li 元素,速度比上面的快
$(“li:gt(2)”)
- 选择 index 大于 3 的元素
#(“li:lt(2)”)
- 选择 index 小于 3 的元素
$(“li.li0”).siblings()
- 选择 li 的所有兄弟元素
$(“li.li0”).next()
- 选择下一个相邻兄弟元素
$(“li.li0”).nextAll()
- 选择所有向下兄弟元素
$(“li.li0”).nextUntil(".li1")
- 向下选择到 li1 之间的兄弟元素
$(“li.li0”).prev()
- 选择相邻向上的兄弟元素
$(“li.li0”).prevAll()
- 选择相邻向上所有兄弟元素
$(“li.li1”).prevUntil(".li0")
- 向上选择到 li0 之间的兄弟元素
$(“ul”).children()
- 选择所有子元素
$(".li1").parent()
- 选择父元素
$(.li1).parents()
- 选择父元素列表
$(".li1").parentsUntil(“body”)
- 选择到 body 之内的父元素列表
$(":header")
- 选择所有 h1-h6 的元素
$(":animated")
- 选择所有 animata 动画元素
$(":focus")
- 选择当前获取焦点的表单元或者超链接
$(“li:empty”)
- 选择空元素
$(“li:parent”)
- 选择有子元素或者后代元素的元素
$(“ul:has(.li0)”)
- 选择 ul 中子代后代类名是 li0 的元素
$(":hidden")
- 选择隐藏标签
$(":visible")
- 选择所有可见标签

四、遍历和设置内容

1.遍历

var arr = [3, 4, 5, 6, 7, 8];

$.each(arr.function(index,value){
  console.log(index, value)
})

2.设置内容

设置文本内容
- $("div").text("你好")

设置不同的内容

var arr = [3, 4, 5, 6, 7, 8];

$('div').text(function (index, item) {
  return arr[index];
});

设置 html 内容
- $(“div”).html("")
获取内容
- $(“div”).html()
设置值等同于 value
- $(“input”).val(‘123’)
获取值等同于 value
- $(“input0”).val()

3.设置数据

设置 DOM 标签属性

$(“div”).attr()

$('div').attr('a', '10');
$('div').attr({
  a: 1,
  b: 2,
  c: 3,
});

删除标签属性
- $(“div”).removeAttr(“a”)
设置 DOM 对象属性
- $(“div”).prop()
```
$('div').prop('ab', 3);
```
删除对象属性
- $(“div”).removeProp(“a”)
设置 DOM 的数据
- $(“div”).data()
```
$('div').data('id', 'aaa');
```
删除数据
$(“div”).removeData(“id”);

4.设置样式

设置单个
- $(“div”).css(“属性名”,“属性值”)
设置多个
- $(“div”).cas({对象,键值对})

5.获取样式

获取单个
- $(“div”).css(“样式名”)
获取多个
- $(“div”).css([‘样式名数组’])
获取宽度
- .width
  - 包含所有
- innerWidth
  - windth - padding
- outerWidth
  - width - padding - border
- outerWidth(true) — 之能获取不能设置
  - width - padding - border -margin