<!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. SSI（服务器端嵌入）

    简介 SSI(服务器端嵌入)是一组放在 HTML 页面中的指令,当服务器向客户端访问提供这些页面时,会解释执行这些指令.它们能为已有的 HTML 页面添加动态生成内容,不需要通过 CGI 程序来或其他 ...

  2. 看各类框架源码淘来的一些JavaScript技巧

    1. 创建定长的JavaScript数组,并赋空值: 出自VUE文档Render函数讲解 // 创建定长20的JavaScript数组,并把每个项的值设为null Array.apply(null, ...

  3. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  4. 0018 CSS注释(简单)

    CSS注释规则: /* 需要注释的内容 */ 进行注释的,即在需要注释的内容前使用 "/*" 标记开始注释,在内容的结尾使用 "*/"结束. 例如: p { / ...

  5. 百度DMA+小度App的蓝牙语音解决方案技术难点解析

    前记   你平时在商场看到的语音助手,看起来非常的简单,其实,这个小小语音助手的背后,是一个非常的复杂的技术支撑.从前端到后端的技术依次是:前端语音降噪技术,高效的音频编解码技术,蓝牙双模技术,DMA ...

  6. DEVOPS技术实践_13:使用Jenkins持续传送设计-CD基础

    1. 分支策略 持续集成中使用的分支策略包括以下三个: The master branch The integration branch The feature branch 而CD只在Integra ...

  7. Asp.net导入Excel并读取数据

    protected void Button1_Click(object sender, EventArgs e) { if (station.HasFile == false)//HasFile用来检 ...

  8. php strcmp函数漏洞

    strcmp函数漏洞 适用5.3版本以前的php 函数作用:字符串比较 要求传入字符串.如果传入非字符串呢? 结果函数报错!但是函数返回“0”  . 虽然报错了但函数的判断却是“相等” 如何传入非字符 ...

  9. 用本地自定义域名访问远程服务器，并支持websocket和cookie

    场景 在公司会有很多测试的机器,或者一些OA服务,Confluence,Jenkins,各种中间件的后台等等,都使用HTTP访问,且由于是内网机器没有域名,输入IP又要输入不同端口,访问起来比较麻烦. ...

  10. 「洛谷P3202」[HNOI2010]弹飞绵羊 解题报告

    P3203 [HNOI2010]弹飞绵羊 题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一 ...