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 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
js实现小时钟效果
2020/03/25 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
深入分析python 排序
2020/08/24 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
英国健身专家:WIT Fitness
2021/02/09 全球购物
2013年军训通讯稿
2014/02/05 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
文明单位申报材料
2014/12/23 职场文书
小学母亲节活动总结
2015/02/10 职场文书
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL