----------------------祖先后代选择器------------------------------

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前端选择器的更多相关文章

  1. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  2. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  3. jquery前端第一讲

    1.bootstrap里面的文件是什么意思: bootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.mi ...

  4. 10分钟-jQuery过滤选择器

    1.:first过滤选择器 本次我们介绍过滤选择器,该类型的选择器是依据某过滤规则进行元素的匹配.书写时以":"号开头,通经常使用于查找集合元素中的某一位置的单个元素. 在jQue ...

  5. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  6. Dojo前端开发框架与jQuery前端开发框架,对比分析总结

    最近Dojo和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD.相同的选择器 引擎Sizzle等.作为业界知名的Jav ...

  7. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  8. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  9. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

随机推荐

  1. 页面js框架

    js 模板,所有页面控制js,以闭包形式编写代码,降低浏览器内存消耗,加快运行速度  请按照此结构编写,便于后期前端维护和修改​1. [代码][JavaScript]代码 /** * js 模板,所有 ...

  2. review17

    关于构造方法Random(long seed)的理解 无参构造方法使用的默认参数是系统当前的毫秒数.使用同一数值的种子参数,生成的随机数也是一样的. 代码如下所示: import java.util. ...

  3. 自动化收集SQLSERVER诊断信息

      自动化收集SQLSERVER诊断信息 相信很多人都遇到过当SQLSERVER出现问题的时候,而你又解决不了需要DBA或者微软售后支持工程师 去帮忙解决问题,那么他们一般需要你收集一些系统信息和SQ ...

  4. 批处理BAT(一)

    批处理 全盘根目录下查找文件夹并删除(1)@echo offfor %%a in (C D E F G H) DO (cd\if exist "%%a:\123\" rd /s / ...

  5. 导入工程“The import android cannot be resolved”错误

    project - Properties - android 1.Project Build Target 勾选响应的SDK 2.default.properties文件,把target = andr ...

  6. 《Advanced Bash-scripting Guide》学习(九):备份最后一天所有修改的文件

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 Example 3-4. 备份最后一天所有修改的文件 #!/bin/bash # ...

  7. vs 2005/2008/2010 ATL ActiveX控件显示XP风格

    vs 2005/2008/2010 ATL ActiveX控件在IE浏览器中控件显示的是原始的风格,要显示XP风格只要进行以下操作 一.在Stdafx.h中增加下以内容 #if defined _M_ ...

  8. db2生成连续日期

    //生成时间段内连续日期 select * from ( select date('2008-01-01') + (row_NUMBER() over () -1) days AS datennn f ...

  9. 201621123014《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 答: 注1:关键词与内容不求多,但概念之间的联系 ...

  10. thinkphp3.0中ajax的发送

    系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于 AJAX调用后返回数据给客户端.并且支持JSON.XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJA ...