脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery选择器

jQuery基本选择器和层次选择器学习使用

 更新时间：2017年02月27日 11:12:10   作者：rain_web  
这篇文章主要介绍了jQuery基本选择器和层次选择器的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery选择器的具体实现代码，供大家参考，具体内容如下

1. 基本选择器

<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery基本选择器</title>
  <script type="text/javascript" src="js/jquery-1.x.js"> </script>
 </head>
 <body>
  <div id="idDiv">DOM对象与jQuery对象的相互转化</div>
  <div class="classDiv">jQuery对象不能直接使用DOM对象的方法，</div>
  <div class="classDiv">但可以通过将jQuery对象转换成DOM对象后再调用其方法。</div>
  <span class="classSpan">基本选择器是jQuery中最常用的选择器</span>
  <script type="text/javascript">
    $(function(e){
      $("#idDiv").css("color","blue");
      $(".classDiv").css("background-color","#dddddd");
      $("span").css("background-color","gray").css("color","white");
      $("*").css("font-size","20px");
      $("#idDiv,.classSpan").css("font-style","italic");
    });
  </script>
 </body>
</html>

2. 层次选择器

<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery层次选择器</title>
  <script type="text/javascript" src="js/jquery-1.x.js"> </script>
 </head>
 <body>
  <div>
    搜索条件<input name="search" />
    <form>
     <label>用户名:</label>
     <input name="useName" />
     <fieldset>
       <label>密　码:</label>
       <input name="password" />
     </fieldset>
    </form>
    <hr/>
    身份证号：<input name="none" /><br/>
    联系电话：<input name="none" />
  </div>
  <script type="text/javascript">
    $(function(e){
      $("form input").css("width","200px");
      $("form > input").css("background","pink");
      $("label + input").css("border-color","blue");
      //$("label").next("input").css("border-color","blue");
      $("form ~ input").css("border-bottom-width","8px");
      //$("form").nextAll("input").css("border-bottom-width","4px");
      $("*").css("padding-top","3px");
    });
  </script>
 </body>
</html>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Jquery 表格合并的问题分享

    Jquery 表格合并的问题分享

    有朋友问GridView控件对于跨行合并的问题，这可以用控件嵌套来完成，当然，我更喜欢在前台来用JS来控制网页元素的样式，而后台仅仅是根据客户的请求，来返回数据。
    2011-09-09
  • JS Canvas定时器模拟动态加载动画

    JS Canvas定时器模拟动态加载动画

    这篇文章主要为大家详细介绍了JS Canvas定时器模拟动态加载动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • jQuery实现div跟随鼠标移动

    jQuery实现div跟随鼠标移动

    这篇文章主要为大家详细介绍了jQuery实现div跟随鼠标移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jQuery实现的回车触发按钮事件功能示例

    jQuery实现的回车触发按钮事件功能示例

    这篇文章主要介绍了jQuery实现的回车触发按钮事件功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-03-03
  • 解决Jquery鼠标经过不停滑动的问题

    解决Jquery鼠标经过不停滑动的问题

    在鼠标经过的时候不停的显示隐藏html元素，正确的写法应该是下面这样的,需要的朋友可以参考下
    2014-03-03
  • jQuery Form插件使用详解_动力节点Java学院整理

    jQuery Form插件使用详解_动力节点Java学院整理

    这篇文章主要为大家详细介绍了jQuery&nbsp;Form插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • jQuery中layer分页器的使用

    jQuery中layer分页器的使用

    本篇文章主要介绍了jQuery中layer分页器的使用，实例介绍了layer分页器的技巧，非常具有实用价值，需要的朋友可以参考下。
    2017-03-03
  • jQuery实现动态粒子效果

    jQuery实现动态粒子效果

    这篇文章主要为大家详细介绍了jQuery实现动态粒子效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • jQuery基于图层模仿五星星评价功能的方法

    jQuery基于图层模仿五星星评价功能的方法

    这篇文章主要介绍了jQuery基于图层模仿五星星评价功能的方法,使用jQuery动态修改元素背景色的方法实现星评功能,需要的朋友可以参考下
    2015-05-05
  • jquery.Callbacks的实现详解

    jquery.Callbacks的实现详解

    这篇文章主要给大家介绍的是jQuery.Callback()的实现,这个函数常见的应用场景是事件触发机制，也就是设计模式中的观察者（发布、订阅机制），目前Callbacks对象用于queue、ajax、Deferred对象中，下面通过这篇文章来详细看看关于jquery.Callbacks实现的介绍吧。
    2016-11-11

最新评论