jQuery基础语法
一.选择器(同css)
1.基本选择器
$("div") 通过标签名获取标签
$("#id") 通过id获取标签
$(".class") 通过class获取标签
2.高级选择器
$("div p") 后代选择器
$("div ,p") 组合选择器
3.属性选择器
$("[type]") 有type属性的
$("[type=text]") type属性为text的
二.筛选器
筛选器就是经过选择器选择后再次筛选
1.基本筛选器
$("ul li:first") 选取ul标签中的li后再筛选出第一个
:last 最后一个
:eq(index) 索引筛选
:even 索引为偶数的
:odd 索引为奇数的
:gt(index) 大于索引的
:lt(index) 小于索引的
:not(选择器) 不满足选择器的
:has(选择器) has后的选择器是子级标签中的
2.表单筛选器(多用于form表单)
:text type=text的标签
:password password类型的标签
:file file类型的标签
:radio radio类型的标签
:checkbox checkbox类型的标签
:submit submit类型的标签
:button button类型的标签
:reset reset类型的标签
:enable 可用的标签
:disable 你可用的标签
:checked 被选择的标签
:selected 被选中的标签
三.筛选器方法
1.下一个标签
$("#id").next()
$("#id").nextAll() 往下所有同级元素
$("#id").nextUntil("#id2") 从id开始到id2的元素,开区间
2.上一个标签
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#id2")
3.父级标签
$("#id").parent() 父级标签
$("#id").parents() 父级及以上标签
$("#id").parentsUntil("#id2")
4.子级和兄弟标签
$("#id").children() 所有子级标签
$("#id").siblings() 所有兄弟标签
5.查找标签
$("div").find("p") 等价于$("div p")
6.筛选标签
$("div").filter(".c1") 从所有div标签中筛选class=c1的标签
四.样式操作
1.class操作
.addClass(cls) 添加类
.removeClass(cls) 删除类
.hasClass(cls) 判断类存在不存在
.toggleClass(cls) 切换类,有就移除,没有就添加
2.css样式操作
.css("color","red") 直接修改
.css({"width":"100px","height":"100px"}) 修改多个值
五.位置操作
1.获取位置和设置位置
offset() 获取元素在当前窗口的相对偏移
offset({top:100,left:100}) 设置标签位置
position() 获取元素相对(有relative或absolute)父级标签的偏移
$(window).scrollTop() 获取上下滚轮的位置,参数可以设置滚轮位置
$(window).scrollTop(0) 设置上下滚轮的位置
$(window).scrollLeft() 获取左右滚轮的位置,参数可以设置滚轮位置
2.尺寸
.height() 盒子模型中content的大小
.width()
.innerHeight() 内容高度+2padding高度
.innerWidth()
.outerHeigt() 内容高度+2padding高度+2border宽度
.outerWidth()
六.文本操作
.html() 获取标签的内容,包含标签
.html(val) 设置标签文本内容,能识别标签
.text() 获取标签文本,不包含标签
.text(val) 设置标签文本内容,不能识别标签
.val() 获取标签的value
.val("value") 给标签设置value值
.val(["v1","v2"]) 给标签设置多个value值
七.属性操作
1.多用于自定义属性
.attr(属性) 获取属性的值
.attr(属性,值) 给标签设置或修改属性值
.attr({属性1:值1,属性2:值2}) 设置多个属性值
.removeAttr(属性) 删除属性
2.多用于固有属性
.prop(属性) 获取属性
.removeProp(属性) 删除属性
八.文档处理
1.追加到标签子级后面
$("div").append(a)
$(a).appendTo($("div"))
2.添加到标签子级前面
$("div").prepend(a)
$(a).prependTo($("div"))
3.添加到标签前面(before),后面(after)
$("div").before(a)
$(a).insertBefore($("div"))
4.删除和清空标签
.remove() 删除标签
.empty() 清空标签里面的内容
5.替换
$("div").replaceWith(a)
$(a).replaceAll("div")
6.克隆
.clone(true) 克隆标签,带上true参数可以把事件也克隆
jQuery基础语法的更多相关文章
- jQuery 基础语法
jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
- web前端----jQuery基础语法
一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...
- <学习笔记 之 JQuery 基础语法>
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
- 学习jQuery基础语法,并通过一个案例引出jQuery的核心
jquery是一个快速.小巧,功能强大的javascript函数库. jquery主要用来替代原生的javascript,简化代码. 前端最头疼的就是兼容:IE6/7/8兼容的最高版本是jQuery1 ...
- jQuery基础语法知识梳理
一.attr() attr()方法设置或返回元素的属性. attr(属性名):获取元素属性名的值. attr(属性名,属性值):设置元素属性名的值. 例子: <a href=”http://12 ...
- jQuery的基础语法实例
jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...
- Web前端学习笔记之jQuery基础
0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
随机推荐
- MySQL之Haproxy+Keepalived+MySQL高可用均衡负载部署 (网络摘抄)
来源于:https://blog.csdn.net/weisong530624687/article/details/71536837?utm_source=blogxgwz3 一.安装主从MySQL ...
- 涂抹mysql笔记-搭建mysql高可用体系
mysql的高可用体系<>追求更高稳定性的服务体系 可扩展性:横向扩展(增加节点).纵向扩展(增加节点的硬件配置) 高可用性<>Slave+LVS+Keepalived实现高可 ...
- [SQL]查询整个数据库中某个特定值所在的表和字段的方法
查询整个数据库中某个特定值所在的表和字段的方法 当数据库做的太庞大的时候,难免会出现忘记哪个值会存入哪个表的情况,于是在网上找到的如下解决办法. 通过做一个存储过程,只需要传入一个想要查找的值,即可查 ...
- 03-封装BeanUtil工具类(javabean转map和map转javabean对象)
package com.oa.test; import java.beans.BeanInfo; import java.beans.IntrospectionException; import ja ...
- 第25课 可变参数模板(6)_function_traits和ScopeGuard的实现
1. function_traits (1)function_traits的作用:获取函数的实际类型.返回值类型.参数个数和具体类型等.它能获取所有函数语义类型信息.可以获取普通函数.函数指针.std ...
- java.util.ConcurrentModificationException详解
引用于http://blog.csdn.net/dabing69221/article/details/40065071 在使用set/map时,一个可爱的小bug:Java.util.Concurr ...
- java常见面试题及答案 11-20(JVM)
11.JVM内存分哪几个区,每个区的作用是什么? Java虚拟机主要分为以下一个区: 方法区:1. 有时候也成为永久代,在该区内很少发生垃圾回收,但是并不代表不发生GC,在这里进行的GC主要是对方法区 ...
- PyQt5 入门
换了VSCODE开发,感觉比sublime好点,可能是由于第三版老弹框烦人吧.VSCODE看着也挺好看的. 学习 PyQt5 中文教程 0. 安装完之后错误 pip 安装了 pyqt5 from Py ...
- Xeon Phi 《协处理器高性能编程指南》随书代码整理 part 3
▶ 第二章,几个简单的程序 ● 代码,单线程 #include <stdio.h> #include <stdlib.h> #include <string.h> ...
- kettle数据库连接使用变量
新增db连接(密码也可以设置参数) 转换中,右键空白处,选择转换设置