jQuery基本语法

一、jQuery基础
1.为什么要用jquery?
写起来简单,省事,开发效率高,兼容性好
2、什么是jQuery?
jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)
3、如何使用jQuery?
1、导入 <script src="jquery-3.2.1.js"></script>
或者<script src="jquery-3.2.1.min.js"></script>
2、语法规则:$("")
4、JS和jQuery的区别?
jQuery就是用JS写的
js是基础,jQuery是工具
5、jQuery介绍
- 版本
- 1.x
兼容IE8。。。
- 3.x
最新
- .min.xx
压缩的:生产环境用
- 没有压缩的(没有.min.xx):开发用
6、 jQuery知识点
  html:裸体的人
  css:穿了衣服的人
   JS:让人动起来
7、选择器:
1、基本选择器
- ID选择器 $("#id的值")
- 类选择器(class) $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")

- 组合选择器 $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("标签~兄弟")

8、jQuery对象:
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象,他就可以使用jQuery方法,不能使用DOM的方法

- DOM对象和jQuery对象转换:
- $(".c1")[0] --> DOM对象
- $(DOM对象)
9、筛选器
- 写在引号里面的
基本筛选器
  $(" :first") 找第一个
  $(" :not('')") 不是/非
  $("#i1>input":not('.c1,.c2'))
  $(" :even") 偶数
  $(" :odd") 奇数
  $(" :eq(index)") 找等于index的
  $(" :gt(index)") 找大于index的
  $(" :lt(index)") 找小于index的
  $(" :last") 最后一个
  $(" :focus") 焦点

            内容==========
  $(" .c1:contains('我是第一个')") 包含文档的内容的标签
  $(" :empty") 标签内容为空的
  $(" :has('')") 包含标签的标签
  $(" :parent") 找有孩子的父亲
  $("#i7").parent() 找i7的父亲

可见性========
  $(" :hidden") 找到隐藏的
  $(" :visible") 找不隐藏的,也就是显示的
  属性==========
  input[name] --> 找有name属性的input
  input[type='password'] --> 类型是password的input标签
表单==========
   :input
  :password
  :checkbox
   :radio
  :submit
   :button
  :image
  :file

表单对象属性=========
:enable 可选的
:disable 不可选
:checked 选中的
:selected 下拉框选中
- 写在信号外面当方法用的
过滤===========
$("").first() 找第一个
$("").parent() 找父亲
$("").eq(index) 找等于index的
.hasClass() 判断有没有某个类的
查找
.children() 找孩子
.find() 查找
.next() 下面的
.nextAll() 下面所有的
.nextUntil() 找下面的直到找到某个标签为止

.parent() 找父亲
.parents() 找所有的父亲
.parentsUntil() 直到找到你要找的那个父亲为止

.prev() 上面的
.prevAll() 上面的所有
.prevUntil() 上面的直到找到某个标签为止

.siblings() 所有的兄弟

- toggleClass()  切换|开关:有就移除,没有就添加

- addClass("hide")  添加类

- removeClass("hide") 删除类

 

以下需要注意的几个图片
(1)

(2)

(3)

(4)

 

 二、练习题

答案

 三、开关示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>开关</title><style>.c1{width: 200px;height: 200px;border :1px solid grey;border-radius: 50%;display: inline-block;}.c2 {background-color: yellow;}</style>
</head>
<body>
<div class="c1"></div>
<button class="btn">点击我</button>
<script src="jquery3_0_0.js"></script>
<script>
//    找到button添加事件$(".btn").on('click',function () {//当点击的时候让变色$(".c1").toggleClass('c2') });</script>
</body>
</html>

 

 






转载于:https://www.cnblogs.com/morgana/p/8492757.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/428078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1-1圆柱体的表面积(算法竞赛入门经典)

源码: #include<iostream> #include<bits/stdc.h> using namespace std; int main() {double r,h;const double piacos(-1.0);double s,s1,s2;cin>>r>>h;s12*pi*r*r;s22*pi*r*h;ss1s2;printf("Area%.3f\n",s);return 0; }收获: 1.const定义…

如何去掉文章里的非关键词c++_B2B/B2C网站:文章标题如何写才能促进搜索排名...

为网站增加高质量内容目的之一是网站在搜索引擎上获得良好曝光机会。创作内容时首先引起我们困惑的是&#xff1a;“这篇文章的标题如何写才能更好&#xff1f;”的确&#xff0c;一个好的文章标题对排名的帮助巨大。尽管没有数据来说明一个好标题对排名的影响程度。但随着时间…

基于DBUtils实现数据库连接池

小知识&#xff1a; 1、子类继承父类的三种方式 class Dog(Animal): #子类 派生类def __init__(self,name,breed, life_value,aggr):# Animal.__init__(self,name,breed, life_value,aggr)#让子类执行父类的方法 就是父类名.方法名&#xff08;参数&#xff09;&#xff0c;连…

1-2 三位数反转(算法竞赛入门经典)

简单的三位数反转代码如下: #include<iostream> #include<bits/stdc.h> using namespace std; int main() {int n;cin>>n;cout<<n%10<<n/10%10<<n/100<<endl;return 0; }但是这里需要考虑一下的细节是题目中是否明确对个位为零的情…

vue中refs的使用

最近在看其他项目的过程中,发现在dom节点上使用了ref"xxx"的使用,以前一直不知道该属性起着什么作用,因为一直忙着写项目. 这两天项目不忙了,有闲心来看别人做的项目了,就看到这个用法了,还是直接百度,有很多解释,大致的意思就是给dom节点绑定一个值value,将这个valu…

python自动保存图片_Python学习笔记:利用爬虫自动保存图片

兴趣才是第一生产驱动力。Part 1起先&#xff0c;源于对某些网站图片浏览只能一张一张的翻页&#xff0c;心生不满。某夜&#xff0c;冒出一个想法&#xff0c;为什么我不能利用爬虫技术把想看的图片给爬下来&#xff0c;然后在本地看个够。由此经过一番初尝试发现&#xff0c;…

1-3 交换变量(算法竞赛入门经典)

交换变量在这里提出了三种方法&#xff0c;代码如下&#xff1a; 我这里直接设计了三个函数用以验证: #include<iostream> #include<bits/stdc.h> using namespace std;void swap1(int a,int b); void swap2(int a,int b); void swap3(int a,int b);int main() {i…

145. Binary Tree Postorder Traversal

Given a binary tree, return the postorder traversal of its nodes values. For example:Given binary tree [1,null,2,3], 1\2/3思路&#xff1a; 借助于一个栈&#xff0c;依次将根节点的右子节点和左子节点压入栈中。如果一个节点为叶子节点&#xff0c;或者前一个出栈的元…

python dataframe group by_Python DataFrame.groupby()聚合函数,分组级运算

pandas提供了一个灵活高效的groupby功能&#xff0c;它使你能以一种自然的方式对数据集进行切片、切块、摘要等操作。根据一个或多个键(可以是函数、数组或DataFrame列名)拆分pandas对象。计算分组摘要统计&#xff0c;如计数、平均值、标准差&#xff0c;或用户自定义函数。对…

计算机网络原理关于实验中几个指令使用的复习——网络层

1.>&#xff1a;普通用户模式。 2.en(enable):特权用户模式 3.conf t&#xff08;configure terminal):进入全局配置模式 4.interface fa0/0:接口配置模式 5.exit:退出返回到上一层。 1.ip route:显示所有路由 2.全局配置模式下: ip route 目的网络 掩码 下一跳的IP 3. arp…

46-单元测试(1)

单元测试&#xff1a;对一个函数&#xff0c;类&#xff0c;模块进行测试&#xff1a;TDD(测试驱动开发) #在同一个目录下建两个py文件&#xff1a;mydict.py和Testmydict.py#mydict.py class Dict(dict):def __init__(self, **kw):super().__init__(**kw)def __getattr__(self…

1-4 鸡兔同笼(算法竞赛经典入门)

这个属于初级阶段传递给初学者的一个思想&#xff0c;那就是计算机是不可以计算方程式的&#xff0c;需要你具体的告诉它每一步需要做什么。 源码如下: #include<iostream> #include<bits/stdc.h> using namespace std; int main() {int m,n;double x,y;cin>&…

计算机网络各层协议

应用层(典型设备:应用程序, 如FTP, SMTP , HTTP) HTTP (Hypertext Transfer Protocol )超文本传输协议 <端口号 80>, 面向事务的应用层协议。 DNS (Domain Name System )域名解析<端口号53> FTP (File Transfer Protocol )文件传输协议<端口号21>减少或消除不…

个人博客网页设计_博客个人网页制作网页设计-1

CSS3仿Flash动画个人博客模板是一款横向全屏切换的个人博客模板。

1-5 三整数排序(算法竞赛入门经典)

书上关于三整数排序的这一问题&#xff0c;完全是为了让初学者去思考分支情况的&#xff0c;并且也要去考虑三个数其中相等的情况。 其实最后一种思想正是后面要学习的排序算法中的选择排序的一种体现。 源码如下: #include<iostream> #include<bits/stdc.h> usin…

uniapp滑动切换tab标签_Web前端,Tab切换,缓存,页面处理的几种方式

前言相信tab切换对于大家来说都不算陌生&#xff0c;后台管理系统中多会用到。如果不知道的话&#xff0c;可以看一下浏览器上方的标签页切换&#xff0c;大概效果就是这样。1.如何切换使用动态组件,相信大家都能看懂(部分代码省略)//通过点击就可以实现两个组件来回切换 切换v…

20165203 2017-2018-2 《Java程序设计》第一周学习总结

20165203 2017-2018-2《Java程序设计》第一周学习总结 教材学习内容总结 &#xff08;一&#xff09;Java的地位 Java是面向对象编程&#xff0c;并涉及网络、多线程等重要的基础知识&#xff0c;是一门很好的面向对象的语言。 &#xff08;二&#xff09;Java的特点 简单 面向…

C语言中printf输出特殊字符(“%d“或者“\n“)

在C语言中&#xff0c;相信很多人尝试过进行“%”的输出&#xff0c;常规的 printf("%d\n"); 肯定是行不通的&#xff0c;这里需要注意的是在c语言中对“%”和“\”的输出是可以的&#xff0c;但是输出格式不能直接进行输出&#xff0c;编译器在编译的时候会把"…

16-1平衡树源代码

本例子分为3个文件。 类声明头文件 hAVL.h #ifndef AVLTREE_H_INCLUDED #define AVLTREE_H_INCLUDED//AVL树数据结构定义 typedef int ElementType;//AVL数节点包含数据类型//树节点 typedef struct AVLNode{ElementType element;//节点包含的数据元素AVLNode *left;//节点左子…

此处不允许使用分组函数_Excel中使用Vlookup函数实现数据分组

Vlookup匹配函数&#xff1a;在表格的首列查找指定的数据&#xff0c;并返回指定的数据所在行中的指定列处的单元格内容。该函数的语法规则如下&#xff1a;VLOOKUP(lookup_value,table_array,col_index_num,range_lookup)draft-node"block" data-draft-type"ta…