web前端学习day_04:jQuery框架

jQuery框架

作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率
jQuery就是一个通过js语言所以写的框架
由于jQuery框架就是js语言所写,引入框架和引入普通的js文件一样
js对象的方法和jq对象的方法不能混着调用,各自调用各自独有的方法和属性

1. js对象和jq对象互相转换

js转jq: var jq = $(js);
jq转js: var js = jq[0]; jq本质上就是一个数组里面装的是js对象

2. jq中的选择器

基础选择器写法和css一样

标签名选择器 $(“div”)
id选择器 $("#id")
class选择器 $(".class")
分组选择器 $(“div,#id,.class”)
任意元素选择器 $("*")

层级选择器

$(“div span”) 匹配div里面所有的span(子孙后代选择器)
$(“div>span”) 匹配div里面的span子元素(子元素选择器)
$(“div+span”) 匹配div的弟弟span
$(“div~span”) 匹配div的弟弟们span
层级相关的方法:
1. $("#abc").prev(“span”) 匹配id为abc元素的哥哥元素
2. $("#abc").prevAll(“div”) 匹配id为abc元素的哥哥们元素
3. $("#abc").next(“div”) 匹配id为abc元素的弟弟元素
4. $("#abc").nextAll(“div”) 匹配id为abc元素的弟弟们元素
5. $("#abc").siblings(“div”) 匹配id为abc元素的兄弟元素
6. $("#abc").parent() 匹配id为abc元素的父元素
7. $("#abc").children(“div”) 匹配id为abc元素的子元素们

过滤选择器

$(“div:first”) 匹配第一个div
$(“div:last”) 匹配最后一个div
$(“div:eq(n)”) 匹配下标为n的div n从0开始
$(“div:lt(n)”) 匹配下标小于n的div
$(“div:gt(n)”) 匹配下标大于n的div
$(“div:even”) 匹配下标为偶数的div
$(“div:odd”) 匹配下标为奇数的div
$(“div:not(.abc)”) 匹配class值不等于abc的div

内容选择器

div:has§
div:empty
div:parent
div:contains(‘xxx’)

可见选择器

div:visible
div:hidden
.show()
.hide()
.toggle()

属性选择器

div[id]
div[xxx=‘xxx’]
div[xxx!=‘xxx’]

子元素选择器

div:first-child
div:last-child
div:nth-child(n) n从1开始

表单选择器

:input
:password
:radio
:checkbox
:checked
:selected

3. 修改页面元素相关

创建及添加元素

创建: var d = $(“

abc

”);
添加到某个元素里面的最后面: 元素对象.append(新元素);
添加到某个元素里面的最前面: 元素对象.prepend(新元素);
插入到某个元素的前面: 元素对象.before(新元素);
插入到某个元素的后面: 元素对象.after(新元素);

删除元素

元素对象.remove();

获取和修改元素的文本内容

元素对象.text(“xxx”) 修改等效 innerText=“xxx”;
元素对象.text() 获取等效 innerText

获取和修改元素的html内容

元素对象.html(“

xxx

”) 等效 innerHTML=“

xxx

”;
元素对象.html() 获取等效 innerHTML

获取或修改元素的css样式

元素对象.css(“样式名”,“值”) 修改
元素对象.css(“样式名”) 获取
样式批量赋值: 元素对象.css({“color”:“red”,“background-color”:“blue”})

获取或修改元素的属性 attribute属性

元素对象.attr(“class”,“xxx”); 修改
元素对象.attr(“class”) 获取

4. 页面失去焦点事件

当页面从浏览状态进入到其它页面的时候属于失去焦点事件
onblur = function(){}

5. 页面获取焦点事件

每次从浏览其它页面回到此页面的时候会触发获取焦点事件
onfocus = function(){}

6. hover事件

是将鼠标移入和移出事件合并到了一起

7. 事件模拟

可以通过代码模拟事件触发
元素对象.trigger(“事件名称”)

8.动画相关

元素对象.hide(时间,方法) 隐藏
元素对象.show(时间,方法) 显示
元素对象.fadeOut(时间,方法) 淡出
元素对象.fadeIn(时间,方法) 淡入
元素对象.slideUp(时间,方法) 上滑
元素对象.slideDown(时间,方法) 下滑
元素对象.animate(样式代码,时间) 自定义

web前端学习day_04:jQuery框架相关推荐

Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标继续学习jQuery框架剩余的内容. 文章目录今日学习目标学习内容一.jQuery操作标签 class操作样式操作位置操作文本值操作属性操作文档处理操作二.jQuery ...
web前端学习笔记——JQuery
web前端开发基础第五章--JQuery 传送门:第一章:HTML | 第二章:CSS | 第三章:html5和CSS3 | 第四章:Javascript(part 1) | 第四章--Javasc ...
web前端学习总结--JQuery
jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器使用户 ...
Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
目录 1.jquery操作样式类名代码演示二.添加元素 1.append()演示 2.prepend()演示 3.after()演示 4.before()演示三.jQuery-CSS()方法 1 ...
如何使用jquery_好程序员web前端学习路线分享jQuery学习技巧
好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! ...
web前端学习分享：JavaScript框架
转自:微点阅读 https://www.weidianyuedu.com web前端培训分享JavaScript框架,JavaScript 是开发领域的重要技术之一.根据 Statista 的报告, ...
Web前端学习路线分享，初学者不要错过！
在技术岗中,前端开发一直是薪资比较高的岗位. ▲北京前端工程师月均薪20.7K(职友集) 前端技术的更新迭代,导致大部分技术人员跟不上.因此越来越多的人想转型做前端开发了.毕竟想要驰骋职场,想要拿年薪 ...
html css 前端实现消息提醒数_自学的福音，web前端学习全套视频教程+最新学习思维导图都在这里...
1.产品经理.这些是负责策划应用程序的一群人.他们会想出很多新鲜的.奇怪的.甚至是不可能实现的应用.一般来说,产品经理都追求丰富的功能. 2.UI设计师.这些人负责应用程序的视觉设计和交互模拟. 3. ...
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...

web前端学习day_04:jQuery框架

jQuery框架

1. js对象和jq对象互相转换

2. jq中的选择器

3. 修改页面元素相关

xxx

xxx

4. 页面失去焦点事件

5. 页面获取焦点事件

6. hover事件

7. 事件模拟

8.动画相关

web前端学习day_04:jQuery框架相关推荐

最新文章

热门文章