JQuery

Stella981
• 阅读 1018

一、jq简介

jq其实就是js的一个文件。

二、jq书写步骤

1、先引入jq文件(min的文件)

2、换新的一行写js代码

3、按照jq的语法写代码

三、入口函数的不同

js的入口函数只能有一个,如果写了多个,它只执行最后一个。

jq的入口函数可以有多个,可以顺序执行每一段

注意:入口函数有一个就够了,不用写很多

四、对象

jquery对象   使用$('')从页面中得到的元素,就是jq对象

DOM对象      使用document从页面中得到的元素,就是DOM对象

区别:

jq:苹果手机   ios系统 不能双卡双待 不能换电池

DOM:安卓手机 安卓系统 可以双卡双待 可以换电池

结论:DOM对象和jq对象的方法是不可混用的

五、对象转换

jq转DOM:[0]或者.get(0)

DOM转jq:$(box)

六、jq控制css

单属性修改:.css('属性名','属性值');

多属性修改:.css({'属性名1':'属性值1','属性名2':'属性值2',.......})

单属性获取:.css('属性名');

七、jq控制HTML标签属性

语法同上:.attr()

八、jq控制html内容

设置:.html('设置的内容');

获取:.html();

九、jq的对角线动画

.show(1000)   显示

.hide(1000)     隐藏

.toggle(1000)  切换

注意:如果只写了以上这些方法,是不会有动画效果的,不需添加时间参数才会出现动画效果。

十、jq滑动动画

.slideUp()        滑动隐藏

.slideDown      滑动显示

.slideToggle()  滑动切换

注意:这组动画,不加时间参数也可以有动画效果

十一、jq基本选择器

1、$('#id'):id选择器

2、$('div'):标签选择器

3、$('.myClass'):类选择器,返回所有class="myClass"的元素

4、$('*'):返回所有元素,多用于结合上下文搜索

5、$('div,span,p,myClass'):多条件选择器,返回所有查到的元素

6、$('.ul01 .li02'):后代选择器

7、$('.ul01 .li02>li'):表示子代选择器,只能选择第一级的后代

8、$('.ul01 .li02+li'):表示选中指定标签后面紧挨着的一个同级标签

9、$('.ul01 .li02~li'):表示选中指定标签后面的所有同级的某种标签

十二、jq过滤选择器

:first     选中第一个

$('.ul01 li:first').css('background','pink')

:last     选中最后一个 

$('.ul01 li:last').css('background','pink')

:not()    除了哪一个其他的。。。

$('.ul01 li:not(.myClass01)').css('background','pink')

:eq()     选中某一个

$('.ul01 li:eq(0)').css('background','pink')

:gt()      大于某一个

$('.ul01 li:gt(2)').css('background','pink')

:lt()        小于某一个

$('.ul01 li:lt(2)').css('background','pink')

十三、筛选选择器

重点:所有的筛选选择器写在选择函数外

三巨头:父、子、兄

$('div').parent()    选中父级元素

$('div').children()  选中子集元素

$(this)                   代表当前对象(跟js里面的this一样)

$(this).$siblings$()  最牛的筛选选择器 免除所有的排他工作,可以选出除了自己以外的所有同级元素。 

$('div').find(p)   搜索所有div中的后代 p元素.

十四、jq的动画排队机制

在jq如果多次出发动画,那么这些动画就会排队等待执行,而这些效果,往往不是我们想要的,所以我们可以在动画的方法之前添加一个.stop()方法来解决此排队问题。

十五、hover方法

.hover(function(){

//鼠标移入事件

},function(){

//鼠标移出事件

})

注意:如果只写了一个匿名函数,代表移入和移出执行的代码一样

十六、索引值

在jq中用选择器选出来元素都有一个index(),可以返回这个元素在父级元素中的索引值(自己家孩子排大小,跟隔壁家没关系)

十七、jq控制class

在jq中,使用attr()方法可以将控制calss,但是jq中专门准备了一系列方法空值class的值。

1、添加类                         addClass('类名')

2、删除类                         removeClass('类名')

3、判断是否有某一个类    hasClass('类名')

4、切换某一个类               toggleClass('类名')

注意:这些类名不用再加     '.'

十八、jq中的链式编程

在jq中如果是针对“同一目标”进行的操作,都可以使用“.”语法来连续书写,这叫jq的链式编程。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这