Jquery前端选择器
----------------------祖先后代选择器------------------------------
1.祖先 后代:根据一个元素可以取得指定的所有子元素(不管中间有多少后代)$("div span")=$(div).find("span")
2.祖先>后代:根据一个元素取出所有对应的指定的子元素。$("div>span")=$("div").children("span")
3.元素+相邻:指的所有与他平级元素信息。next()代替
4.元素~兄弟:取得所有与它平级的所有子元素信息。nextall()
-----------------索引选择器---------------------
1.:first-->
2.:last-->$("div>ul li:last")=$("div>ul li").last()
3.:not(元素)-->
4.:even-->索引编号为偶数
5.:odd-->索引编号为奇数
6.:eq-->取得指定索引编号的元素
7.:gt-->大于
8.:lt-->小于
9.:header-->取得所有的<hx>元素的信息
----------------------内容选择器--------------------------
1.:contains(内容)-->返回含有指定文本内容的所有元素。$("div td:contains('李四')")
2.:empty-->返回所有不包含子元素或文本的所有元素。$("div li:empty")
3.:parent-->返回所有包含子元素的所有元素集合。$("div li:parent")
4.:has(选择器)-->获取所有包含指定选择器所匹配的元素。$(div *:has(li))
5.父元素选择器-->使用parent()函数取得指定元素的父元素。$("span").parent("p")--找到span元素的父元素为p的元素。
--------------------------可见性选择器---------------------------------
设置层隐藏:div 对象.style.display="none":-->$("div").hide(5000);
<div style="display:none;">
<img src="data:images/pic.jpg">
</div>
1.:hidden
设置层显示:div 对象.style.display="block":-->$("div").show(5000);
2.:visible
-------------------------属性选择器------------------------------------
1.[属性名称]-->取得包含有指定属性名称的所有元素
2.[属性=内容]-->取得包含指定属性,并属性为指定内容的所有元素-->$("div [id=msg]")
3.[属性!=内容]-->取得不包含指定属性,并属性为指定内容的元素
4.[属性^=内容]-->以指定内容开始的元素。
5.[属性$=内容]-->以指定内容结尾的元素。
6.[属性*=内容]-->包含
7.[属性选择器][属性选择器][属性选择器]
一般情况:
<div>
<div id="msg" name="na"></div>
</div>
选择器:$("[id][name]")
------------------------列元素选择器------------------------------------
1.:nth-child(eq|even|odd|index)-->列的索引是从1开始的。-->$("div td:nth-child(1)")
2.:first-child
3.:last-child
4.:only-child
-------------------------表单对象选择器------------------------------------
1.:input-->取得所有输入组件的对象,包括:text\password\select
2.:text-->取得所有文本输入框的元素
3.:password-->取所有密码的输入组件
4.:radio-->单选按钮
5.:checkbox-->复选框
6.:button-->按钮
7.:submit-->提交按钮
8.:rest-->
9.:image-->
10.:file-->
结合each函数,dom操作。
-----------------------------------属性操作--------------------------------------------
dom解析处理过程之中对属性操作的函数
1.设置属性:元素对象.setAttribute(属性名称,属性内容)
2.取得属性:元素对象.getAttribute(属性名称)
3.删除属性:元素对象.removeAttribute(属性名称)
jQuery简化操作:
1.设置属性:JQuery元素对象.attr(属性名称,属性内容)
$("div>img").attr("src","images/pic.jpg");
$("div>img").attr("width","200px");
2.取得属性:JQuery元素对象.attr(属性名称)
3.删除属性:JQuery元素对象.removeAttr(属性名称)
$("div [width]").removeAttr("width");==$("div").find("[width]").removeAttr("width")
样式操作:
jQuery对象.attr("class","样式名称");
jQuery对象.addClass("样式名称");
jQuery对象.css("样式名字","样式内容");
$("div>span").css("color","white");
------------------------------------元素操作函数---------------------------------------------
1.append(元素|文本内容|function)-->指定的元素后边追加新内容
2.appendTo()-->将一个选择好的元素追加到指定的元素之后
3.prepend(元素|文本内容|function)-->指定的元素前边追加新内容
4.prependTo()-->前
5.after(元素|文本内容|function)-->
6.before(元素|文本内容|function)-->
7.insertAfter(元素|文本内容|function)-->
8.insertBefore(元素|文本内容|function)-->指定元素的外部前
9.clone([true])
10.replaceWith(元素|文本内容|function)-->
11.replaceAll(元素|文本内容|function)-->
12.wrapAll(元素|文本内容|function)-->
13.unwrapAll(元素|文本内容|function)-->
14.wrapInner()-->进行元素内包裹
15.each(callback)-->进行元素的遍历处理操作
16.remove()-->删除当前元素
17.empty()-->清楚子元素
-----------
函数的结果处理数据
-----------------------------------原生动画-------------------------------------------------
Jquery前端选择器的更多相关文章
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jquery前端第一讲
1.bootstrap里面的文件是什么意思: bootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.mi ...
- 10分钟-jQuery过滤选择器
1.:first过滤选择器 本次我们介绍过滤选择器,该类型的选择器是依据某过滤规则进行元素的匹配.书写时以":"号开头,通经常使用于查找集合元素中的某一位置的单个元素. 在jQue ...
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- Dojo前端开发框架与jQuery前端开发框架,对比分析总结
最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
随机推荐
- swagger 在apache CXF 中的使用——JAX-RS Swagger2Feature
The CXF Swagger2Feature allows you to generate Swagger 2.0 documents from JAX-RS service endpoints w ...
- Spring_总结_04_高级配置(五)_运行时注入值
一.前言 本文承接上一节:Spring_总结_04_高级配置(四)_bean的作用域 当讨论依赖注入的时候,我们通常所讨论的是将一个bean引用注入到另一个bean的属性或者构造参数中.它通常指的是将 ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- Nhibernate系列学习之(五) 存储过程
NHibernate也是能够操作存储过程的,不过第一次配置可能会碰到很多错误. 一.删除 首先,我们新建一个存储过程如下: CREATE PROC DeletePerson @Id int AS DE ...
- Django 框架概况
Django 里更关注的是模型(Model).模板(Template)和视图(Views),称为 MTV模式: M 代表模型(Model),即数据存取层. 该层处理与数据相关的所有事务:如何存取.如何 ...
- hdu4442 Physical Examination(贪心)
这种样式的最优解问题一看就是贪心.如果一下不好看,那么可以按照由特殊到一般的思维方式,先看n==2时怎么选顺序(这种由特殊到一般的思维方式是思考很多问题的入口): 有两个队时,若先选第一个,则ans= ...
- STL的erase函数和lower_bound
前提摘要: [1]一般我们的区间是左闭右开,如下面例子2. [2]erase函数谨慎使用. [3]map也是有序保存的. [erase] 1,删除字符串的首字母: string s="ecu ...
- maven module开发 自动打包
http://blog.csdn.net/u011113713/article/details/52413903 http://blog.csdn.net/sisyphus_z/article/det ...
- npm 安装参数中的 --save-dev 是什么意思
看到有些 node.js 的包安装的时候都加上 --save-dev 参数,不知道这参数是做什么的,加和不加有什么区别吗? $ npm install xxx --save-dev 当你为你的模块安装 ...
- HIVE-几道经典的hive题目
建表相关语句在此,具体的数据自己制作吧 create table student(Sno int,Sname string,Sex string,Sage int,Sdept string)row f ...