<!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. 使用idea构建Hibernate5项目

    使用工具:IntelliJ IDEA 2017.2.5 x64 MySql-8.0.1 hibernate-release-5.3.1.Final 导入的jar包: 以及连接MySql的jdbc包.和 ...

  2. Vue____实现本地代码推送到云端仓库的相关操作

    项目初始化搭建完毕,每进行一个功能模块开发的必备操作,目的是方便协同开发以及备份代码 一.每开发一个新功能,都应该创建一个新分枝,待该功能模块开发完成以后,再合并到主分支master中,具体步骤如下: ...

  3. .NET ORM 开源项目 FreeSql 1.0 正式版发布

    一.简介 FreeSql 是 .NET 平台下的对象关系映射技术(O/RM),支持 .NetCore 2.1+ 或 .NetFramework 4.0+ 或 Xamarin. 从 0.0.1 发布,历 ...

  4. CentOS 下 git 401 Unauthorized while accessing 问题解决

    The requested URL returned error: 401 Unauthorized while accessing 这个一般是旧版git的问题,需要安装新版的.CentOS 想下载最 ...

  5. Flink State Backends (状态后端)

    State Backends 的作用 有状态的流计算是Flink的一大特点,状态本质上是数据,数据是需要维护的,例如数据库就是维护数据的一种解决方案.State Backends 的作用就是用来维护S ...

  6. JVM探秘：Java对象

    本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. 对象的创建 虚拟机遇到一条 new 指令时,首先去检查这个指令的参数是否能在方法区常量 ...

  7. HDU3652 B-number 题解 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3652 题目大意: 求区间 \([1, n]\) 范围内包含连续的数位"13"并且能 ...

  8. RHEL6.6安装Oracle 11g RAC - 基于VMware的实验环境

    实验环境准备虚拟机:VMware® Workstation 14 Pro操作系统:Red Hat Enterprise Linux 6.6 x86_64rhel-server-6.6-x86_64-d ...

  9. CentOS 安装图形化界面后重启出现许可等事项操作

    这是CentOS内核的初始设置页面,下面给出中文解释及操作方法. 1.CentOS Linux 7 初始设置(核心) 1)[!]许可证信息 (没有接受许可证) 请您选择[‘1’ 输入许可证信息 | ‘ ...

  10. React实现座位排布组件

    React实现座位排布组件 最近在开发一个影院系统的后台管理系统,该后台可以设置一个影厅的布局. 后台使用的是react框架,一位大神学长在几天之内就把这个控件研究出来了,并进行了较为严密的封装,佩服 ...