<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

     </head>

     <body>

         <script type="text/javascript">

             //检测jQuery文件是否引入成功

             console.log($);

             //基础选择器

 //            通过id来获取元素 document.getElementById();

 //            $('#logo').css('border','solid 2px red');

 //            通过标签名来获取元素

 //            $('div').css('background-color','red');

 //            通过class类名来获取元素

 //            $('.logo').css('background-color','red');

 //            逗号 并列获取

 //            $('#item','#item1').css('background-color','red');

 //            空格 层级获取

 //            $('#item1 #item1').css('background-color','red');

             //过滤获取

 //          获取第一个元素

 //          $('li:first').css('background-color','#369');

 //          获取最后一个元素

 //          $('li:last').css('background-color','369');

 //          获取指定索引的元素,索引从0开始

 //          $('li:eq(7)').css('background-color','#369');

 //          $('li').eq(7).css('background-color','#369');

 //           获取包含指定文本的元素

 //          $('li:contains(国)').css('background-color','#369');

 //          通过包含指定属性来获取元素,通过属性来获取

 //          $('li[name=y]').css('background-color','#369');

             //父子关系获取

             //获取所有的子元素

 //          $('#images').children().css('background-color','#369');

             //获取第一个子元素

 //          $('ul li:first-child').css('background-color','#369');

             //获取最后一个子元素

 //          $('ul li:last-child').css('background-color','#369');

             //获取指定索引的子元素  索引从1开始

 //          $('ul li:nth-child(3)').css('background-color','#369');

             //获取元素上一个同级元素

 //          $('#f').prev().css('background-color','#369');

             // 获取元素下一个同级元素

 //          $('#f').next().css('background-color','#369');

             //获取所有同辈元素(同辈元素不包含自己)

 //          $('#f').siblings().css('background-color','#369');

             //获取父级元素

 //          $('#f').parent().css({background-color:'#369',width:'20px'，border:'1px solid red'});//多种样式同时获取和修改

             //获取先辈级元素

 //          $('#f').find('#all').css('background-color','#369');

             //在父级元素中查找指定的子元素

 //          $('#f').find('.w').css('background-color','#369');

 //          通过jQuery来给元素添加class属性

 //          $('div').addClass('.item1 .item2').css('background-color','#369');

 //          通过jQuery删除class属性 注意:如果不指定要删除的类名 name就删除所有类的属性

 //          $('div').removeClass('div');

 //          移除多个样式

 //          $('div').removeClass('div div2');

 //          重复切换anotherClass的样式

 //          文本操作

 //          html()取出或设置html内容

             //取出html内容

 //          var $htm = $('#div1').html();

             //设置html内容

 //          $('#div').html('<span>添加文字</span>');

 //          attr()取出或设置某个属性的值

             //取出图片的地址

 //          var Src = $('#img1').attr('src');

             //设置图片的地址和alt属性

 //          $('#img1').attr({src:'test.jpg',alt:'Test Image'});

             //用户设置class属性

 //          $('#img1').attr('class','all');

             //也可以自定义 属性

 //          $('#abc').attr('love','iloveyou');

 //         removeattr()删除属性

 //         $('#abc').removeAttr('class');

            // ...

         </script>

     </body>

 </html>

jQuery-01-jQuery选择器及元素操作的更多相关文章

  1. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  2. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

    this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(“”):获取元素   标 ...

  4. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  5. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

  6. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  7. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  8. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  9. 【jQuery基础学习】01 jQuery选择器

    关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...

随机推荐

  1. struts2中的数据类型自动转换

    参考:https://blog.csdn.net/qq_35326718/article/details/72453042 https://www.cnblogs.com/aigeileshei/p/ ...

  2. Python_全局变量的定义

    1.在my套件下新建一个关键字systemkey并进行脚本的编写:创建一个${var1}变量,并赋值为aaaaaaaaaa Set Global Variable        ${var1}    ...

  3. Visio高级应用部件

    标注与公式的应用: 插入标注 怎么让标注与图形建立关联:拖动标注的时候坐下角会出现黄色的点 把标准拖动到形状边的时候让黄点进入形状就是建立了关联 然后标注就会随着形状的移动而移动 而且复制和删除也都是 ...

  4. Appium+Pytest实现app并发测试

    前言 这个功能已经写完很长时间了,一直没有发出来,今天先把代码发出来吧,有一些代码是参考网上写的,具体的代码说明今天暂时先不发了,代码解释的太详细还得我花点时间^_^, 毕竟想让每个人都能看明白也不容 ...

  5. ansible安装与核心组件详解

    第1章 安装anisble 1.1 安装epel源 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarc ...

  6. pytorch :: Dataloader中的迭代器和生成器应用

    在使用pytorch训练模型,经常需要加载大量图片数据,因此pytorch提供了好用的数据加载工具Dataloader. 为了实现小批量循环读取大型数据集,在Dataloader类具体实现中,使用了迭 ...

  7. Unity3D小游戏开发之两个我踩过的坑

    最近在开发一个植物大战僵尸小游戏,今天写了一早上的代码,踩了两个坑,这两个坑的位置分别位于触发器和数据转换,写这篇博文以此来让其他程序员不要再去踩这两个坑. 1.我在做简易僵尸模型的时候,这个僵尸模型 ...

  8. 什么是Ceph存储？什么是分布式存储？简单明了带你学Ceph--<1>

    Ceph存储介绍 为什么要用Ceph Ceph是当前非常流行的开源分布式存储系统,具有高扩展性.高性能.高可靠性等优点,同时提供块存储服务(rbd).对象存储服务(rgw)以及文件系统存储服务(cep ...

  9. 在nginx里面部署node.js本地服务器

    我一个前端,为啥要搞服务器呢?因为公司就招了一个后端啊,后端忙不过来,就叫我这个萌新前端去搞后端的东西,我太难了. 直接进入正题吧,因为公司需求,要我在nginx服务器上面搭一个node.js服务器, ...

  10. Linux gcc版本升级

    Linux gcc版本升级 操作环境 RHEL7,在进行内核编译时编译器版本,需要升级gcc编译器,选择gcc-8.3.0. http://ftp.gnu.org/gnu/gcc 里面提供所有的gcc ...