<!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. 转：EBS-自动获取/创建CCID

    DECLARE l_ccid NUMBER; l_msg ); l_chart_of_account_id NUMBER; l_set_of_book_id NUMBER; BEGIN l_set_o ...

  2. 使用IDEA创建基于Maven SpringMvc项目

    使用IDEA创建基于Maven SpringMvc项目 1.通过程序启动——create project,或者file--New-projec打开New project 2.自定义groupid等信息 ...

  3. Visual Studio Team Services使用教程【5】：Readers tfs组成员添加

    2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visual Studio Team Services(VSTS)与敏捷开发ALM实战关键报告( ...

  4. Linux基础：认识Linux

    1.Linux操作系统的特点 优点 ​ (1)可靠性高:linux是基于Unix的概念开发出来的系统,拥有Unix的稳定且效率的特点.运行一年以上而不曾宕机.不必关机是很平常的事情 : ​ (2)彻底 ...

  5. 更新到@vue/cli 4.1.1版本的前端开发前的准备

    一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js ...

  6. leetcode 1301. 最大得分的路径数目

    地址 https://leetcode-cn.com/problems/number-of-paths-with-max-score/ 给你一个正方形字符数组 board ,你从数组最右下方的字符 ' ...

  7. C# 字符串与二进制的相互转换

    /// <summary> /// 将字符串转成二进制 /// </summary> /// <param name="s"></para ...

  8. $Loj10155$ 数字转换(求树的最长链) 树形$DP$

    loj Description 如果一个数x的/约数和/y(不包括他本身)比他本身小,那么x可以变成y,y 也可以变成x.限定所有数字变换在不超过n的正整数范围内进行,求不断进行数字变换且不出现重复数 ...

  9. Redo与Undo的理解

    本文概要本文的原意是一篇个人学习笔记,为了避免成为草草记录一下的流水账,尝试从给人介绍的角度开写.但在整理的过程中,越来越感觉力不从心,一是细节太多了,原以为足够了解的一个小知识点下可能隐藏了很多细节 ...

  10. Android系统启动过程分析

    Android系统启动过程分析 一.Android平台架构 首先贴一张Android系统架构图方便理解整个Android架构,这可以让我们从整体上对整个启动流程有个大概认知. 可以看出整个架构由5部分 ...