Jquery基础知识点梳理
时间:2019-03-15
本文章向大家介绍Jquery基础知识点梳理,主要包括Jquery基础知识点梳理使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、第一个jq程序
a、jq对象和dom对象的方法不能混用
b、dom对象转换成jq对象$(dom),jq对象转换成dom对象jq[0],转换之后方法就可以使用了
2、jq选择器
基本选择器
$('body') //标签选择器 $('#btn') //id选择器 $('.class') //类选择器 $('p:odd') //奇偶行选择器 $('p:even') $('p:first') //页面中的第一个p $('p:last') $('p:first-child') //p的父元素的第一个子元素p $('p:first-last') $('p:nth-child(1)') //p的父元素的第一个子元素p $('p:nth-of-type(2)') //p元素是其父元素的第2个p元素 $('p:nth-last-of-type(2)') //倒序
额外选择器
$('div:has(a)') //里面包含a标签的div $('a[title]') //属性选择器有title属性的a $('a[href^=www]') //以www开头的href值的a $('a[href$=pdf]') //以pdf结束的href值的a $('a[href="www.jfidg"]') //href值为www.jfidg的a $('a[href*=www]') //href属性值里包含www的a $('input[type=button]') $(':button') //获取所有的按钮 $(':disabled') //所有被禁用的元素
3、jq基本方法
$('div').eq(2) //第二个div $('div:eq(2)') //eq也可以写在里面 $('div:gt(2)') //第二个div后面的一个div(此方法只能写在里面) $('div').eq(2).siblings() //获取第二个div的兄弟元素 $('span').not(':eq(2)') //不包括第二个的span $('input').not(':button') $('span').filter(':eq(2)') //刷选出第二个
$(".d1").parent() //找到类为d1的一级父元素 $(".d1").parents() //找到类为d1的所有的祖先父元素 $(".d1").children() //找到子元素 $(".d1").prev() //同一级的上一个 $(".d1").prevAll() //同一级的所有的 $(".d1").next() //下一个 $(".d1").nextAll()
4、jq链
$("div").find("p").addClass("c2").addClass("c1") $("div").find("p").addClass("c2").end().addClass("c1") //end是当前结果级的上一个结果,此处是div $("div").find("p").addClass("c2").endSelf().addClass("c1") //endSelf表示给当前结果和当前结果的上级都加
5、jq额外方法
$("div").attr("title") //获取属性值 $("div").attr("title","aaaa") //设置属性值 $("div").attr({"title":"aaaa","id":"d3"}) //设置多个属性值 $("#d4").html() //获取所有,加上参数也可以设置内容 $("#d4").text() //获取文本 $("#d2").hasClass("c1") //判断是否含有c1类 $("#d1").is("p") //判断是否是p元素
$("div").addClass("d1").filter(function (index) { return index==1 || $(this).attr("id")=="d3" //index索引 }).addClass("c2"); $("div").append("<p>你好</p>") //追加内容 $("<p>你好</p>").appendTo('#d1') //加到某个元素中 $("<p>你好</p>").insertBefore('#d1') //插入到d1前面 $("<p>你好</p>").insertAfter('#d1') //插入到d1后面 $("div").mousemove(function () { //鼠标移入 }) $("div").mousedown(function () { //鼠标移出 }) $("div").hover(function () { //移入事件 },function () { //移出事件 })
$('div').size() //获取div的数量 $('div').css('color','red') //添加样式,设置的是行内样式,权重比较高 $('div').css({'color':'red','font-size':'14px'}) $('div').addClass('className') //添加类名,一般用于样式修改 $('div').removeClass('className') //一次类名 $('div').find('p') //查询元素
- 漂洋过海! 英文域名d.me小六位易主
- Python基础09 面向对象的进一步拓展
- QT中获取选中的radioButton的两种方法
- QT中根据ID设置radio按钮
- QWebView在 Qt 5.x中编译出错:File not found: main.obj
- Qt实现小功能之列表无限加载
- Python基础08 面向对象的基本概念
- 如何选择合适的PaaS
- 使用Qt installer framework制作安装包
- Qt Style Sheet实践(三):QCheckBox和QRadioButton
- 堆排序
- 剑指OFFER之旋转数组的最小数字(九度OJ1386)
- Qt Style Sheet实践(四):行文本编辑框QLineEdit及自动补全
- 剑指OFFER之旋转数组的最小数字(九度OJ1386)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- flume kafka和sparkstreaming整合
- Docker如何搭建私有registry镜像仓库
- Harbor介绍与企业级私有Docker镜像仓库搭建
- 如何查看docker run启动参数命令
- YAML 语言教程与使用案例
- 计算等压面要素场的基本检验指标
- Kubernetes K8S之SSL证书有效期修改
- Kubernetes K8S之通过yaml文件创建Pod与Pod常用字段详解
- Kubernetes K8S之kubectl命令详解及常用示例
- Kubernetes K8S之Pod 生命周期与init container初始化容器详解
- Kubernetes K8S之Pod生命周期与探针检测
- Kubernetes K8S之Pod 生命周期与postStart、preStop事件
- Kubernetes K8S之资源控制器RC、RS、Deployment详解
- python教程 | 最标准的地图调用方式(国家测绘局提供数据)
- Kubernetes K8S之资源控制器StatefulSets详解