jQuery元素选择器实例代码


Posted in Javascript onFebruary 06, 2017

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

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
  div {
    width: 100px;
    height: 90px;
    float: left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
  <div class="aaron">
    <p>class="aaron"</p>
    <p>选中</p>
  </div>
  <div class="aaron">
    <p>class="aaron"</p>
    <p>选中</p>
  </div>
  <div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery选中</p>
  </div>
  <div class="imooc">
    <p>class="imooc"</p>
    <p>jQuery选中</p>
  </div>

  <script type="text/javascript">
  //通过原生方法处理
  //获取到所有的节点标记名为div的元素
  //给每一个div加上蓝色的边框
  var divs = document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.border = "3px solid blue";
  }
  </script>
  <script type="text/javascript">
  //通过jQuery直接传入标签名p
  //标签是可以多个的,所以得到的同样也是一个合集
  $("p").css("border", "3px solid red");
  </script>
</body>

</html>

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

Javascript 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
jQuery链使用指南
Jan 20 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
vue生成token并保存到本地存储中
Jul 17 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
jquery实现input框获取焦点的方法
Feb 06 #Javascript
jQuery表单元素选择器代码实例
Feb 06 #Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 #Javascript
如何获取元素的最终background-color
Feb 06 #Javascript
a标签置灰不可点击的实现方法
Feb 06 #Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 #Javascript
You might like
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP中读写文件实现代码
2011/10/20 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
javascript获取web应用根目录的方法
2014/02/12 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
python选择排序算法的实现代码
2013/11/21 Python
跟老齐学Python之for循环语句
2014/10/02 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
详解Python绘图Turtle库
2019/10/12 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
校园安全检查制度
2014/02/03 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
2014年清明节寄语
2014/04/03 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
转变工作作风心得体会
2016/01/23 职场文书