<!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. delphi 子窗体最大化

    procedure TForm2.FormCreate(Sender: TObject);begin perform(WM_SIZE,SIZE_MAXIMIZED,0);end; http://blo ...

  2. ML基础——搜索引擎与图书管理，百度与李彦宏

    本文始发于个人公众号:TechFlow 谈及机器学习,大家想必会有许多联想,比如最近火热的人工智能,再比如战胜李世石的AlphaGo,甚至还会有人联想起骇客帝国或者是机械公敌等经典机器人电影. 但实际 ...

  3. PLsql下载官网下载地址

    https://www.allroundautomations.com/registered/plsqldev.html

  4. pycharm 设置代码折叠和展开（mac）

    折叠/展开 pycharm设置 点击PyCharm--->Preferences--->Editor--->General--->Code Folding,勾选Show cod ...

  5. 配置Mongodb两种方式

    手动上传方式 Mongodb-Centos7 安装之前准备工作 下载地址:https://www.mongodb.org/dl/linux 环境说明:下载地址 1系统虚拟机信息:CentOS7 X86 ...

  6. Python+appium+unittest UI自动化测试

    什么是UI自动化 自动化分层 单元自动化测试,指对软件中最小可测试单元进行检查和验证,一般需要借助单元测试框架,如java的JUnit,python的unittest等 接口自动化测试,主要检查验证模 ...

  7. 「Luogu P1435」回文字串 解题报告

    题面 主要大衣大意: 给定一个字符串,求至少加入多少个字符才能使字符串变成回文字符串 下面就是我一本正经的胡说八道题解 思路: 很显然,这应该是一道典型的最长公共子序列的题目 因此,主要思想就是DP ...

  8. 「算法竞赛进阶指南」0x01 最短Hamilton路径 解题报告

    题目在这里啊题目在这里~ Hamilton路径:将所有点都遍历刚好一次的路径 思路: 数据范围比较小(1~20),所以我们可以考虑暴力中的枚举 数组f[i][j]​ i的二进制表示选取了哪些点 j表示 ...

  9. 鼠标右键新建Markdown文档

    首先放一张github某项目中.md文件中的内容图片 Windows系统下,使用 Typora 软件来进入Markdown文档的编写非常容易,而且入门门槛非常的低 存在的问题: 习惯了使用Markdo ...

  10. scalikeJDBC的restapi

    ScalikeJDBC是一个Scala的JDBC框架,适用于绝大多数RDBMS数据库(关系数据库) 重要的是,在这几天简单的使用了一下,用sqlserver来测试了一下用mysql或者h2的scali ...