id、class等各种选择器总结
1. id 选择器 #
class 选择器 .
标签 选择器 标签名
群组 选择器 用逗号隔开
全局 选择器 *
2. 后代 元素 选择器 空格
子代 元素 选择器 >
紧邻同辈 元素 选择器 +
相邻同辈 元素 选择器 ~
3. first() 第一个
last() 最后一个
even() 奇数个
odd() 偶数个
eq() 指定的那一个(下标)
gt() 大于本元素的(下标)
lt() 小于本元素的(下标)
4. 表单域 选择器 :表单名
5. 表单对象属性选择器
获取选中的复选框元素 :checkbox:checked
获取选中的单选框元素 :radio:checked
获取选中的下拉框元素 option:selected
6. 属性选择器
普通包含选择器(包含id属性的元素):标签名[id]
属性等于选择器 [id=XXXXX]
复合属性选择器 [value=''][id]
7. 搜索父元素
父 元素 parent()
祖先元素 parents()
搜索同辈元素
上一个 prev()
下一个 next()
所有 siblings()
搜索子元素
children()
过滤操作
filter
例如:console.log($(":input").filter("[id]"));
过滤出input有id的
map
例如:$(":checkbox:checked").map(function (){return $(this).val();}).get().join(",");
多选框数值的接收
8. 内部追加
内部向前追加 【prepend】
内部向后追加 【append】
外部追加
外部向前追加 【before】
外部向后追加 【after】
9. 删除
删除节点 remove
清空节点 empty
10.元素内容
操作HTML
//设置p中的html内容
$("p:first").html("<a href='#'>跳转</a>");
//获取p标签中的html内容
var t=$("p:first").html();
console.log(t);
操作文本
//获取p标签中的文本
var m=$("p:first").text();
console.log(m);
//设置p标签中的文本
$("p:first").text("<a href='#'>跳转</a>");
操作值
//获取和设置单标签input元素的值
//获取id和name的元素的value属性的值
var name = $("#name").val();
console.log(name);
//设置id是btn的元素的value属性的值
$("#btn").val("提交");
元素属性
//读取和修改属性
//.attr("属性名","属性值");
//读取id为name的type属性值
var zhi = $("#name").attr("type");
console.log(zhi);
//修改id为name的type属性值为button
$("#name").attr("id","button");
//删除id是name的value属性
$("#button").removeAttr("value");
元素样式
//添加样式类 addClass
$("#btn").addClass("c");
//移除样式类 removeClass
//$("#btn").removeClass();
//是否包含样式类 hasClass
var flag = $("#btn").hasClass("c");
console.log(flag);
元素css
//设置css样式
//1.链式操作
$("div").css("width","100px").css("height","100px").css("background-color","red");
//2.对象
$("div").css({"width":"200px","height":"200px","background-color":"green"});
//读取css样式
console.log($("div").css("width"));
console.log($("div").css("background-color"));
//元素css位置
//position:获取当前元素相对于父元素的偏移
var position = $("div").position(); console.log(position);
//元素css尺寸
//width
console.log($("#button").width());
//height
console.log($("#button").height());
//innerWidth
console.log($("#button").innerWidth());
//innerHeight
console.log($("#button").innerHeight());
//outerWidth
console.log($("#button").outerWidth());
//outerHeight
console.log($("#button").outerHeight());
id、class等各种选择器总结的更多相关文章
- css笔记08:id选择器之父子选择器
1.父子选择器 (1)01.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- ID、Class和标签选择器优先级
按一般论:ID > Class > 标签 1.如以下样式: <div id="id" class="class">选择器优先权</ ...
- 类选择器与ID选择器的比较
如果已经在元素中标识了class或id,就可以在选择器中使用这个标准,从而只对已标识的元素进行格式化.不过推荐使用类选择器,一会儿我会解释理由. 要在class选择器和id选择器之间作出选择的时候,建 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 神通广大的CSS3选择器
每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分.但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- jquery选择器(总结)
基本选择器 选择器 描述 示例 #id 根据给定的ID匹配一个元素 $("#id") .class 根据制定的class匹配一个元素 $(".class") ...
随机推荐
- LeetCode 240 - 搜索二维矩阵 II
编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列.每列的元素从上到下升序排列.示例: 现有矩阵 matrix 如 ...
- Codeforces 1154 - A/B/C/D/E/F/G - (Undone)
链接:https://codeforces.com/contest/1154 A - Restoring Three Numbers - [水] #include<bits/stdc++.h&g ...
- mvc模式的理解
一开始总是觉得dao层和service层没有区别,甚至觉得service层根本就是多余的,service层就是把dao层的内容调用了一下,然后重写了一次,后来才理解到,dao层是数据链路层,是与数据库 ...
- idea右键没有svn选项
然后apply,当然也可以只是某些指定的文件夹.project就是当前项目,包括所有的module.
- 本地浏览器Websql数据库操作
前几天看到一个小姐姐问我一个添加修改的我看了一下案例弄了一个出来.... 参考案例:HTML5本地数据库(WebSQL)[转] - 狂流 - 博客园 https://www.cnblogs.com/ ...
- Elasticsearch学习笔记(十一)Mapping原理
一.Mapping的功能作用 Mapping是定义如何存储和索引一个document及其所包含字段的过程. Mapping是index和type的元数据,每个type都有自己的一个mapping,决定 ...
- SharePoint 2013 拷贝文件夹到本地
网站--设计(小齿轮)--网站内容--文档库--打开文档库后---单击标题--库--找到下图的红色框的图标. 其名称[使用资源管理器打开] 打开后所有的操作都像资源管理器的操作方式一样
- java8新特性学习笔记链接
https://blog.csdn.net/yitian_66/article/details/81010434
- 移动iptv安装三方软件
1.思路: 分为硬件和软件. a.硬件是ttl直接上串口,弄得比较复杂,且容易损坏盒子,先不考虑 b.软件:抓包获取iptv的请求数据,将移动光猫的iptv出口接到交换机上,电脑和盒子接入到同一个交 ...
- [LeetCode] 139. Word Break_ Medium tag: Dynamic Programming
Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, determine ...