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


Posted in Javascript onFebruary 27, 2017

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

1. 基本选择器

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

<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. 层次选择器

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

<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基本选择器和层次选择器学习使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
htm调用JS代码
Mar 15 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
面试常见的js算法题
Mar 23 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
vue实现购物车案例
May 30 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 #Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 #Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 #Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 #Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 #Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 #Javascript
JavaScript中object和Object的区别(详解)
Feb 27 #Javascript
You might like
php新建文件自动编号的思路与实现
2011/06/27 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
Javascript中的数学函数
2007/04/04 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
python实现清屏的方法
2015/04/30 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
担保书怎么写
2014/04/01 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
考研复习计划
2015/01/19 职场文书
2015年母亲节寄语
2015/03/23 职场文书
中学教师教学工作总结
2015/08/13 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python