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中递归函数用法注意点
Jul 30 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
JS实现商品筛选功能
Aug 19 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
微信小程序搭建自己的Https服务器
May 02 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php动态函数调用方法
2015/05/21 PHP
php常用正则函数实例小结
2016/12/29 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
python操作MongoDB基础知识
2013/11/01 Python
Python @property装饰器原理解析
2020/01/22 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
优秀的教师个人的中文求职信
2013/09/21 职场文书
找工作最新求职信
2013/12/22 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
献爱心倡议书
2014/04/14 职场文书
七一讲话心得体会
2014/09/05 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
房屋转让协议书
2014/10/18 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS