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 相关文章推荐
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue+elementUI实现简单日历功能
Sep 24 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 array的学习笔记
2012/05/16 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
python3 shelve模块的详解
2017/07/08 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
领导检查欢迎词
2014/01/14 职场文书
诚信的演讲稿范文
2014/05/12 职场文书