p:odd 选择奇数个数的p标签
p:even选择奇数个数的p标签
p:gt(n)选择下标 大于n的p标签
p:lt(n)选择下标小于n的p标签
$(":root ")选择的是根元素,也就是说可以控制整个页面的属性例:$(":root").css("background","blue");
$("p:target")选择匹配id和标识符相匹配的元素,target在jquery中还有其他的用法例:
event.target.nodeName
可以用来标示那个元素触发了事件
内容过滤
$("div:contains('john')") 查找所有包含john的div元素 //如果是字母的话,则区分大小写
$("p:empty")查找所有不包含子元素或者文本的p标签
$("p:parent")查找所有包含子元素或者文本的p标签
$("div:has(p)")匹配所有包含p标签的div元素
可见性过滤器
$("div:hidden")匹配所有不可见的元素或者type为hidden的元素
$("div:visible") 匹配所有可见的div元素
属性过滤选择器
$("div[id]")查找所有含有id属性的div元素 //可以为任意属性
$("input[name='new']") 匹配所有name为new的input元素 //可以为任意自定义的元素
$("input[name!='new']") 匹配所name不为new的input元素 //可以为任意自定义的元素
$("input[name ^='new']") 匹配所name以new开始的input元素 //可以为任意自定义的元素
$("input[name $='new']") 匹配所name以new结束的input元素 //可以为任意自定义的元素
$("input[name *='new']") 匹配所包含name字符串的input元素 //可以为任意自定义的元素
$("input[name *='new'][id]") 匹配所包含name字符串且有id属性的input元素 //可以为任意自定义的元素
表单对象属性过滤选择器
$("p:disabled") 匹配所有不可用的p标签
$("p:enbled") 匹配所有可用的p标签
$("input:checked")匹配所有选中的被选中元素,包含复选框,单选框。不包括select中的option
$(":selected")匹配所有选中的option元素
$("p").index(); 匹配出p标签的索引值,还有其他用法:例:
$("p").index(document.getElementById("a")); 会查询出id为a的p标签的索引值 ,这是以传递一个dom对象,返回这个对象在原先集合中的索引位置
$("p").index($("#a")); 这是以传递一个jquery对象返回这个对象在原先集合中的索引位置
$("p").index($('p:gt(0)') 传递一个索引值大于0的集合,并返回第一个元素的索引值
$("#id").index($("li")) 传递一个选择器,返回#id在所有li中的索引值
$("#id").index() 不传递参数,返回#id在整个同辈元素中的索引位置
$("p").data("a",{key:"value ",key2:"value2 "}); 取值的时候语法为:$("p").data("a");
如果要删除之前添加的数据的话:$("p").removeData("a");
$("p"):animated 获取正在执行动画效果的p标签元素
dom操作
设置元素操作
$("img").attr("src","img/a.png"); //这是单个属性设置的时候
$("img").attr({src:"img/a.png",title:"这是a图片"}); //这是设置多个属性的时候
删除元素操作
$("img").removeAttr("src"); 删除img的src路径
元素内容操作
$("span").text (); //获取span里面的文本内容
$("span").html(); //获取span里面的html内容
$("span").text("你好啊"); //设置span的文本内容
$("span").html("你好");//设置span的html内容
.val/.text/.html
这三个的区别是,
html可以输出html元素节点及文本节点,
val输出的是实体,且val只支持表单元素
text的话如果需要输出的是元素节点的话直接会以实体方式显示出来
$("select").change(function(){
var str=$("select").val().join(".");
})
这样可以获取每次选择后的select的值
addClass属性和removeClass属性可以添加和移出class样式
addClass添加的时候可以如下面的例子一样多个样式:
$("p").addClass("样式1 样式2 样式3"); //中间用空格隔开
同样————删除样式也可以如此,例
$("p").removeClass("样式1 样式2 样式3"); //中间用空格隔开
toggleClass可以切换样式,例
$("p").click(function(){
$(this).toggleClass("样式");
});
创建节点元素
append元素的语法:
$(html) 例
var ap=$("<div title='nihao'>hello</div>");
$("body").append(ap);
或者
$("body").append( "<div title='nihao'>hello</div>" );
插入节点
append("<div title='nihao'>hello</div>");
另:append(function(){index,html})
$("body").append( function(){
var a= "<div title='nihao'>hello</div>" ;
return a;
})
appendTo的作用是向指定元素插入界面中已存在的元素,例
<img id ="a" src ="img/s2-1.png" alt ="adadaadds" />
< img id= "b" src= "img/s2-2.png" alt= "adadaadds" />
< span id= ""></ span>
$("img#a").appendTo($( "span"));
after和appen的作用差不多不过after主要是向...之后添加元素,例:
$("span").after("<div title='nihao'>hello</div>");
或者
$("span").after(function(){
var a=$("<div title='nihao'>hello</div>" );
return a;
})
before是向....之前插入元素用法与after一样
insertAfter的作用其实和after的作用差不多,例
$("<p>你好</p>").insertAfter("span");
insertBefore的语法如上和insertA
复制节点
clone复制现有节点元素,例
$("img").click( function(){
$(this).clone( true).appendTo("span" );
})
替换节点
$("span").click( function(){
$(this).replaceWith( "<span>你好啊啊啊</span>" );
})
$("#id").replaceWith("content"); //第二个括号里面放的会是内容或者元素节点+内容或者是对象
replaceAll和replaceWith最大的区别在于替换字符的顺序
$("<span>你好啊啊啊</span>").replaceAll("#a");
包裹元素
wrap的作用是用元素包裹起指定的元素,例
$("span").wrap( "<i></i>" );
向上查找祖先元素
parent是向上一级,parent是所有父级
parentsUntil的作用是匹配指定范围内的父级元素,如果不加参数的话,则相当于parents,匹配所有父级元素。
获取到的是多个值,
语法是:
$("li.ac").parentsUntil("ul").css("background","red");
offsetParent是向上找到当前元素的第一个定位祖先元素,offsetParent
closest的作用是查找指定的父级元素对象,向上寻找,查找到,便停止。切只能返回0或者1个元素
语法是:
$("li.ac").closest("ul").css("background","red");
向上查找相邻元素
prev方法用来向上查找相邻元素 注:prev如果不填参数,则向上所有上一个相邻,也就是获取向上最近的一个,。在,如果有参数,则筛选
语法为:
$(".av").prev().text();
prevAll向上查找所有邻近元素,无参的时候则是向上匹配所有元素,有参的话,就筛选出符合条件的对象
prevUntil不填参数的时候可以向上匹配所有同级元素,填了的话则匹配符合的元素
向下查找相邻元素
反向的next,nextAll和nextUntil的语法参照上面的向上查找
删除元素
remove的用法
$("ul li:eq(0)").remove(); 删除ul下面第一个li及其内所有元素
$("ul li").remove("[title=3]");删除title为3的元素及其内所有元素
- jQuery中的基本的选择器学习(补充版)
先看整体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- jQuery的12种选择器
jQuery的12种选择器 1.#id : 根据给定的ID匹配一个元素 显示(用加粗的代替颜色): 这是第一个p标签 2.* : 匹配所有元素,多用于结合上下文来搜索 显示 : 这是p标签 这是di ...
- 18 12 26 css 学习 选择器
1.标签选择器 标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中.举例: *{margin:0;padding:0} div{color:red} <div>....</ ...
- 12套swift学习资源分享
虽然objective-c编程语言在过去很长一段时间都是iOS应用开发的基础语言,且很多iOS开发者对其也深爱有佳,但是随着swift编程语言的问世,迅速发展为开发者追捧的语言.且今年伴随着swift ...
- CSS学习总结4:派生选择器学习总结
派生选择器:通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁.派生选择器中一共分为三种:后代选择器.子元素选择器.相邻兄弟选择器. 1.初识派生选择器 实例:你希望列表中的 stron ...
- jQ选择器学习片段(JavaScript 部分对应)
$()函数在大多的JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是. $("#id")通过id来获取元素,用来代替document.getElement ...
- CSS3选择器学习笔记
CSS选择器总结: 一.基本选择器 1.通配选择器:[ * ] 选择文档中所以HTML元素. *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置marg ...
- Jquery伪选择器学习笔记
对于我这个半路出家的前端,使用jquery已经很长时间了,对于选择器,一直都局限在id,class,element选择器.每次写一个元素都得想一个id,一个页面写下来想id名都想的累的慌.最近手头项目 ...
- html之css选择器学习
相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...
随机推荐
- linux使用tcpdump抓包工具抓取网络数据包,多示例演示
tcpdump是linux命令行下常用的的一个抓包工具,记录一下平时常用的方式,测试机器系统是ubuntu 12.04. tcpdump的命令格式 tcpdump的参数众多,通过man tcpdump ...
- ng组件通讯的几种方式
通过输入型绑定把数据从父组件传到子组件. 如<app-hero-child *ngFor="let hero of heroes" [hero]="hero&qu ...
- ActiveMQ、Stomp、SockJS入门级应用
使用ActiveMQ.Stomp.SockJS实现实时在线聊天 ActiveMQ : 强大的开源即时通讯和集成模式的服务器.在本项目中充当消息代理服务器,stomp协议服务端. 安装:在官网下载,直接 ...
- Js比较对Object类型进行排序
<script> var data=[{name:"121",age:"18",year:"2018"},{name:" ...
- 在Mac下配置Maven环境
下载Maven安装文件,(http://maven.apache.org/download.html)如:apache-maven-3.5.0-bin.zip,然后解压到本地目录. 打开 .bash_ ...
- PHP opcache扩展安装
下面是我在PHP 5.4下的安装方法: https://pecl.php.net/get/zendopcache-7.0.5.tgz tar xzf zendopcache-7.0.5.tgz cd ...
- POJ - 3268 单源最短路
题意:给定一些有向边,以及一个目的地,从某个点到达目的地,再从目的地回到那个点.共有n个点,问这n个点花费最大是多少? 思路:从目的地回去直接把目的地作为源点即可.那么从某个点到达目的地应该如何得到最 ...
- UVA 816 bfs
算法入门经典上面的题.题目链接 uva816 大致题意 有一个最多包含9*9个交叉点的迷宫.输入起点.离开起点时的朝向和终点,求一条最短路(多解时任意输出一个即可).详细题意请看原题 思路 其实就是b ...
- java 学习第二天小练习
1.从控制台输入学员王浩3门课程成绩,编写程序实现 ChengJi (1)数学课和英语课的分数之差 (2)3门课的平均分 代码如下: p.p1 { margin: 0.0px 0.0px 0.0px ...
- 影响JavaScript应用可扩展性因素
引言:JavaScript 应用变得越来越庞大.这是因为使用JavaScript能做的事情远比我们大多数人所需求的要多得多.我们不能仅因为技术上可行,就去考虑软件系统的扩展问题.为一个不需要扩展的系统 ...