id选择器

     JQuery 能使用CSS选择器来操作网页中的标签元素。如果想要通过一个id号去查找另一个元素就可以使用下面格式的选择

     $('#my_id')  其中my_id表示根据id选择器获取页面中的指定的标签元素，且返回一个唯一的元素。

element元素选择器

     $("element")就是元素名称

          <body>

               <div>1</div>

               <div>2</div>

          </body>

     获取所有div元素的选择器：（修改所有div元素字体的样式）

     <script type="text/javascript">

        $('div').css("font-weight","bold") ;

      </script>

.class选择器

     $(".class") 其中.class参数表示元素的css类别(类选择器)名称。

     <div class="red">my red </div>

    <script type="text/javascript">

       var $className = $(".red").attr("class")

    </script>

$(“*”) 获取全部的元素

选择器中的参数就一个“*”， 既没有“#” 号，也没有 “.”号。  由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。

sele1 sele2 seleN 选择器

调用的格式如下：

     $("sele1,sele2,seleN") 参数sele1 sele2到seleN为有效选择器,每个选择器之间用","号隔开，它们可以是前天提到的各种类型的选择器

     如 $('#id')

常用的几种选择器

元素元素
选择器 描述
$('*') 选取所有的元素
$(this) 选取当前的HTML元素
$('p.intro') 选取class为intro的

元素
$('p:first') 选取第一个

元素
$('ul li:first') 选取第一个
    元素的第一个
  • 元素
$('ul li:first-child') 选取每个ul元素的第一个
  • 元素
    		•
    $('[href]') 选取带有herf属性的元素
    $('：button') 选取所有type=button的元素和元素
    $('tr:even') 选取偶数位置的
    $('tr:odd') 选取奇数位置的

    获取UL下li的个数

    <ul class="dep_5">
    
<li></li>
    
<li></li>
    
</ul>
    
获取ul下li的个数：
    
$('.dep_5 li').length;

    层叠选择器

    $("form input") 选择所有form元素中的input元素
    
$("#main >*") 选择id值为main的所有的子元素
    
$("label+input") 选择所有的label元素的下一个input元素节点，
    
经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    
$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

    input的选择器

    $("input[name='ssgao']") 选择所name为ssgao的input元素
    
$("input[name！='ssgao']") 选择所name不是ssgao的input元素
    
​
    
$("input[name^='news']")  选择所有name属性以‘news’开头的input属性
    
$("input[name$='news']") 选择所有name属性以'news'结尾的input属性
    
$("input[name*='news']") 选择所有name属性包含'news'的input属性

    jquery 操作class

    jquery 拥有若干进行css操作的方法
    
addClass() 向被选元素添加一个或多个类
    
removeClass() 从被选元素删除一个或多个类
    
toggleClass() 对被选元素进行添加/删除类的切换
    
css() 设置或返回样式属性
    
jquery对css的操作
    
jquery返回css属性
    
 $('p').css('propertyname');
    
jquery设置css属性
    
$('p').css('propertyname','value');
    
jquery 设置多个css属性
    
$('p').css('propertyname':'value','propertyname':'value');

    jquery 设置背景色

    $(selector).css('backgroundImage',"url(bg.jpg)");
    
var s = "images/"+row+".jpg"; //row表示变量信息
    
$('body').css('background-image',"url("+s+")");

    jquery 元素选择器的更多相关文章

    1. jquery 元素选择器集合

      一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(function () { ...

    2. jQuery之选择器

      jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

    3. 从零开始学习jQuery-------jQuery元素选择器(三)

      下面我们来介绍一下jQuery元素选择器,在Web开发中我们最常用的操作是获取元素,然后对获取的元素进行一系列的操作,jQuery根据获取页面元素的不同,可以将jQuery选择器分为四大类:基本选择器 ...

    4. jQuery 各种选择器 $.()用法

      jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选 ...

    5. js jquery css 选择器总结

      js jquery css 选择器总结 一.原始JS(Document 对象)选择器. id选择器:document.getElementById("test"); name选择器 ...

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

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

    7. 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

      × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...

    8. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

      × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

    9. jQuery选择器总结 jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

      新年第一编文章 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法   $("#myELement")    选择id值等于myElement的元素,id值 ...

    随机推荐

    1. NativeWindow_02_DialogBoxParam_VC6

      PS: 代码参考于<<Windows环境下32位汇编语言程序设计.chm>>,第5章,"5.4 对 话 框(2)" . ZC: 与CreateWindow( ...

    2. vue定义全局方法 调用其他组件的方法

      官网的写法  vue实例.$on就可以在根实例上定义全局方法 this.$root就是获取根实例  如果没有根实例 就表示当前实例 this.$root.$on 不需要.eventHub 不需要下面这 ...

    3. leecode第六十二题（不同路径）

      class Solution { public: int uniquePaths(int m, int n) { ||n==) ; vector<vector<int>> pa ...

    4. 清理SuperMap iclient 三维插件的缓存批处理

      在windows任何位置,新建一个文本文件,将下面内容复制到文本文件中并保存,然后修改该文本文件后缀为.bat,鼠标点击执行即可完成清理工作~ @echo off title 清理三维缓存 @echo ...

    5. python中的异常处理tryexcept

      1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! 2.异常种类 names = ['张三','李四 ...

    6. 雷林鹏分享：XML 相关技术

      XML 相关技术 下面是一个 XML 技术的列表. XHTML (可扩展 HTML) 更严格更纯净的基于 XML 的 HTML 版本. XML DOM (XML 文档对象模型) 访问和操作 XML 的 ...

    7. English trip EM2-LP-1B Favorite Things Teacher:William Full name: Willian Richard Ogzrd 威廉理查德·奥格兹德

      课上内容(Lesson) # music pop  流行音乐 light music 轻音乐 rep 说唱音乐 rack 摇滚乐 classic  古典乐 hip-hop n. 街舞,即兴音乐:嘻哈 ...

    8. 分享基于EF+WCF的通用三层架构及解析

      本项目结合EF 4.3及WCF实现了经典三层架构,各层面向接口,WCF实现SOA,Repository封装调用,在此基础上实现了WCFContext,动态服务调用及一个分页的实例. 1. 项目架构图: ...

    9. LeetCode--004--寻找两个有序数组的中位数（java）

      转自https://blog.csdn.net/chen_xinjia/article/details/69258706 其中,N1=4,N2=6,size=4+6=10. 1,现在有的是两个已经排好 ...

    10. liunx系统部署

      Linux系统安装与基本配置 =======================================内容提要:获取Linux 常用发行版的方式DELL/HP/IBM 服务器介绍DELL/HP/ ...