jquery.选择器
1.本章我们学习jquery，先对jquery做一个简单的概述，jquery与我们之前学习的js类似，jquery不是一门语言，是js的框架也可以说是js的简化版
2.jquery的用途：简单来说jquery是用来简化JavaScript的开发，用于中大型网页开发
先来看看js与jquery的对比
注：1.在使用jquery前要用script标签的src属性来引入jquery
2.jquery-3.5.1.js是需要下载的，官网:http://jquery.com/
3.我们需要将下载的jquery-3.5.1.js，复制在js下面
4.<script src="js/jquery-3.5.1.js"></script>
5.可用$符号调用jquery
从案例可以看出函数fn01()是传统的js函数fn02()是jquery函数两个函数达到的效果都是使div背景颜色改变，显而易见当我们使用jquery是代码变得简单化了
<style>.container{width: 100px;height: 100px;background: red;}</style><!--引入jquery--><script src="js/jquery-3.5.1.js"></script>
</head>
<body><div class="container"></div><div class="container"></div><div class="container"></div><div class="container"></div><div class="container"></div><div class="container"></div><button onclick="fn02()">点我改变颜色</button><script>//jquery 不是一门语言//jquery 是js的框架（是js的升级+简化）function fn01() {let ds=document.getElementsByClassName("container")//多个元素for(let d of ds){d.style.background="blue"}}console.log($) //输出jqueryfunction fn02() {//$就是jquerylet div=$(".container")//修改样式div.css("background","blue")}</script></body>用css修改样式时：往往会遇到一个问题，当你只需要修改某一个div样式时由于jquery的特性会将其他的同时修改，我们将学习以下选择器：#，.，elemet，*
1.#id id选择器 .class class选择器 element元素选择器 *通配符：拿到所有标签
$("#aa")：指定id为aa的div
$(".dd")：指定class为bb的div
往往id是唯一的，则class是可重复的，那么问题又来了，$(".bb")指定的是哪个class为bb的div
方法一：可用类似于强转$($(".bb")[0])，$(".bb")拿到的是一个数组，可通过坐标拿到想要的div，但$(".bb")[0]不是jquery元素不能调用css方法，那么将它放入一个$()中变成jquery元素。
方法二：有个单词可直接实现这一操作eq()
$(".bb").eq(0)
2.很多时候我们需要拿到标签下某个元素，有两种情景：
情景一：$("div p")
拿到div中的所有p标签
情景二：$("div>p")
拿到div下的第一级子标签中的p标签
<script src="js/jquery-3.5.1.js"></script><style>div{width: 100px;height: 100px;display: inline-block;background: red;}</style>
</head>
<body><p>后天啊积极</p><div id="aa"><p>今天啊哈哈</p><p>明天啊喜喜</p></div><div class="bb"></div><div class="bb"></div><script>//jquery本身支持css选择器console.log($("#aa"))console.log($(".bb").eq(0))//css是jquery的方法 只有jquery对象才才能调用//$(".bb")[0]拿出来的js中的正常对象//如何将js对象变成jquery: $(xx)// $(".bb")[0].css("background","blue")//$(...)[0].css is not a functionconsole.log($("div"))console.log($("*"))//div中所有的p标签$("div p").css("color","white")//div中的第一级p标签（子标签）$("div>p").css("color","white")</script>
</div>
</body>完成表单隔行换色
1.首先接触到几个单词
first 获得第一个元素
last 获得最后一个元素
even 获得偶数下标的元素
odd 获得奇数下标的元素
add.class 增加class元素
:gt 大于
:lt 小于
$("tr:gt(0):odd").addclass("aa")
定义.aa的背景
从大于0行开始奇数行增加class为aa
$("tr:lt(0):even").addclass("bb")
定义.bb的背景
从小于0行开始偶数行增加class为bb
<style>.aa{background: blue;color: white;}.bb{background: green;color: orange;}</style><script src="js/jquery-3.5.1.js"></script>
</head>
<body><table border><tr><td>商品名字</td><td>商品价格</td><td>商品编号</td><td>商品描述</td></tr><tr><td>无敌大苹果
jquery.选择器相关推荐
- 【jquery】jquery选择器
知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...
- JQuery——选择器分类
JQuery选择器 1 什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2 JQuery选择器分类 2.1 基本选择器 CSS选择器 层级选择器 表单域选择器 ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- jQuery选择器回顾，IE8还需要你发光发热
2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...
- [翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
- Jquery 选择器大全 【转载】
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
- JQuery 选择器。
• #id • element • .class • .class.cl ...
- 使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
- 认识jQuery及jQuery选择器
记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...
最新文章
- 独家 | 浅谈强化学习原理（附代码链接）
- java io 文件是否存在,代码实例Java IO判断目录和文件是否存在
- 我为什么雇佣家庭主妇做软件测试
- DevOps自动化工具集合
- 鸿蒙os界面鲁大师,鲁大师鸿蒙版下载-鲁大师 鸿蒙版v10.4.5-PC6鸿蒙网
- java 开发环境 列表_Java 开发环境配置
- 如何在 NVIDIA GPU、CUDA 和 cuDNN 中使用 OpenCV 的“dnn”模块
- python信号端点检测_语音端点检测（Voice Activity Detection,VAD）
- 游戏角色命名与游戏风格
- 9.Makefile隐含规则
- 如何判断iPhone5 iPhone 5S iPhone6 iPhone6 plus？
- index函数python查询所有_index函数python查询所有_Python List index()方法
- [Eigen]Eigen的单位矩阵C++
- java 找不到方法_Java程序找不到主方法，在哪里加上呢
- 【Kafka】Kafka消费者相关策略
- Java HashMap面试须知
- 类的继承：人，学校，学生，老师，班主任！
- PSpice 仿真混沌电路的相图的步骤
- Linux文本三剑客
- blender建模基础操作
热门文章