jquery相关知识点总结

本文总结了jQuery的相关知识点,包括jQuery的概念、优势、选择器的使用、样式操作、元素查找、对象转换、属性与内容操作以及文档操作。jQuery简化了JavaScript的DOM操作,提供链式写法和跨浏览器兼容性,同时介绍了如何在jQuery和原生JS之间转换对象,以及各种实用的DOM操作方法。
摘要由CSDN通过智能技术生成

1、jquery概念

是js的一个类库 (对js中某些功能的封装)
用jq实现的功能一定能用js实现 反过来 不一定,js实现的功能jq不一定能实现。

2、jquery好处

a、代码简洁 b、兼容性好 c、最少的代码做多的事情 d、性能支持比较好
e、节约学习成本 f、让DOM操作变的简单

jQuery框架支持链式写法
jQuery框架实现了跨浏览器的兼容包括IE低版本
jQuery1.x版本支持低版本IE浏览器
可以操作css3样式
jquery可以和原生js结合一起使用setTimeout( function(){ jq代码 },1000 )
注意 : 原生DOM对象不能使用jquery对象 操作方法 document.getElementById("").dom的操作方式
jquery的对象不能使用原生dom操作方法
用jq实现的用js一定能实现 反过来不一定
选择器、属性操作、样式操作、内容操作、文档操作(dom)、 动画 、事件处理 、 ajax 、jq插件

3、jquery选择器

$是jQuery的简写 含义一样
$ 符号 是一个函数 function
$() 返回值是对象object类型 同 jQuery()
也就是 $() 等价 jQuery()
注意 : 通过jquery方式查找到的元素 不能使用js的方式操作 样式、属性、内容… $("").style.color = “” 错
通过js方式查找到的元素 不能使用jq的各种方法操作 样式、属性、内容… document.getElementById().css() 错
在这里插入图片描述
基本选择器 :
id选择器 $("#id名")
类选择器 $(".class名")
标签选择器 $(“html标签”)
组合选择器 $(“id,class”)
通用选择器 $("*") 查找所有的标签
层级选择器 :
空格 查找当前元素里面的所有后代元素

>        查找当前元素里面的所有子代元素
+        查找当前元素下面的紧邻的兄弟节点
~        查找当前元素下面的所有的兄弟节点

层级选择器
查找过滤选择器(都是方法) :
first() $(“li”).first() :first
last() :last
eq(下标) 下标从0开始 等价 :eq(下标)
find() $(“div.box”).find(“span”) 查找给定元素的后代
children() 查找给定元素的子代 $().children(“span”) $().children()
next() $(“p”).next() $(“p”).next(“span”)指定的下一个元素
prev() 前一个 用法同next()
nextAll() 下面所有的 可以指定参数 也可以不指定
prevAll() 前一个所有
siblings() 除了自身之外的所有兄弟元素(也可以指定参数)
parent() 查找某个元素的父元素
filter() 参数可以是一个回调函数
$(“p”).filter(function(){
return 条件;返回满足某个条件的p元素
})
not() 除了…之外 :not

查找过滤选择器具体用法

4、jquery中的样式操作

css() 获取样式 $().css(“color”)
用法 : .css(“样式”,“值”)
.css({ “样式”:“值” ,“样式”:“值”,…})
.addClass(“类名”) 添加样式类 .removeClass() 删除样式类
hasClass()判断一个元素是否含有某个样式类 返回布尔值 toggleClass(切换样式类)

jq样式获取

5、jquery中查找元素下标

index() 查找该元素在同辈元素中的位置

6、jquery对象和dom对象的互换问题

dom对象转成jq对象 : $( dom对象 )
var obj = document.getElementById(“box”)
$( obj )
jq对象转化成dom对象 :
$().get(下标)—dom对象
$()[下标] —dom对象
var $list = $(“li”);
$list.get(2)
$list[2]
在这里插入图片描述
7、属性操作
attr() 获取或设置标签元素的属性 (该方法不能操作属性值是布尔类型的属性 比如 : checked 操作布尔类型属性 用 prop() )
获取 : 对象.attr()
设置 : 对象.attr(“属性”,“值”)
对象.attr({
属性 : 值,

})
属性操作
8、jquery中的样式操作
css() 获取样式
用法 : .css(“样式”,“值”)
.css({ “样式”:“值” ,“样式”:“值”,…})
.addClass(“类名”) 添加样式类 .removeClass() 删除样式类 判断样式类 hasClass

9、jquery中的内容操作
标签 :
html() 获取或设置 非表单元素的内容 设置内容html()方法会识别标记 获取时只获取第一个
text() 纯文本操作 获取时获取所有的元素内容
表单 :
val() 获取或设置表单元素的内 获取:无参数 设置 :有参数
jquery中的内容操作
10、jquery的文档操作
append() 向指定的父元素后添加新子元素
appendTo() 将某个子元素添加到指定的父元素后面
prepend() 前置新内容
prependTo()
after()
insertAfter()
before()
insertBefore()
jquery的文档操作位置详解
empty() 清空
remove() 删除所有
detach() 删除某个指定的元素
clone() 克隆
wrap() 把所有的元素用新创建的元素包裹起来
replaceWith() 将所有的元素替换成指定的元素 移动不是复制
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素
动态创建动态创建

//三级联动
三级联动详解

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值