jQuery-01-jQuery选择器及元素操作
<!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选择器及元素操作的更多相关文章
- jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
- jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、
this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload === $(document).ready(); $(“”):获取元素 标 ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- jQuery简单过滤选择器
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--jQuery选择器详解 根据所获 ...
- webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- 【jQuery基础学习】01 jQuery选择器
关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...
随机推荐
- android权限申请执行过程
弹出的授权对口窗口实际上是一个activity(隐式intent启动上图第二个方块里)(com.android.packageinstaller.permission.ui.Grantpermissi ...
- acwing 239. 奇偶游戏 并查集
地址 https://www.acwing.com/problem/content/241/ 小A和小B在玩一个游戏. 首先,小A写了一个由0和1组成的序列S,长度为N. 然后,小B向小A提出了M个 ...
- TVP访谈 | 贝壳金服史海峰：中台虽百家争鸣，但不是所有企业必需品
导语 | 中台作为一个技术概念,曾一度被捧得火热.那么,中台现在发展到了什么阶段呢?对于所有企业来讲,中台都是普适的么?中台在具体的落地过程中,究竟存在哪些问题呢?腾讯云最具价值专家(TVP)史海峰, ...
- 「洛谷P1306」斐波那契公约数 解题报告
P1306 斐波那契公约数 题目描述 对于Fibonacci数列:1,1,2,3,5,8,13......大家应该很熟悉吧~~~但是现在有一个很"简单"问题:第n项和第m项的最大公 ...
- gcc 命令详解
1. gcc -E source_file.c-E,只执行到预编译.直接输出预编译结果. 2. gcc -S source_file.c -S,只执行到源代码到汇编代码的转换,输出汇编代码. 3. g ...
- Spring Cloud Stream消息驱动之RocketMQ入门（一）
SpringCloudStream目前支持的中间件有RabbitMQ.Kafka,还有我最近在学习的RocketMQ,以下是我学习的笔记 学习Spring cloud Stream 可以先学习一下了解 ...
- 天梯 L2 这是二叉搜索树吗？
L2-004 这是二叉搜索树吗? (25 分) 一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点的键值: 其右子树中所有结点的键值大于等于该结点的 ...
- 关于javaweb开发的环境搭建（一）Tomcat
进行Tomcat的下载及环境配置 1.下载地址 http://tomcat.apache.org/ 2.下载的注意事项 下载的Tomcat版本要与自身电脑安装的java版本相匹配,下载时,点击 ...
- 使用redis的zset实现高效分页查询（附完整代码）
一.需求 移动端系统里有用户和文章,文章可设置权限对部分用户开放.现要实现的功能是,用户浏览自己能看的最新文章,并可以上滑分页查看. 二.数据库表设计 涉及到的数据库表有:用户表TbUser.文章表T ...
- 使用Jenkins进行前端UVE项目部署
操作步骤 1.用 Jenkins 管理员账号下载 NodeJS Plugin 2.系统管理 ---> 全局工具配置 ---> NodeJS ---> 安装 ---> 自动安装 ...