html5 jq框架,JQuery框架

JQuery框架

概念:

定义:

JQuery是一个便捷的,简洁的JavaScript框架,封装了Js常用的功能代码,提供一种简便的Js设计模式,优化Html文档操作、事件处理、动画设计和Ajax交互。

本质:

JQuery框架,本质上就是一下Js文件,封装了JS的原生代码。

使用步骤:

下载JQuery文件。

导入后缀名为main的文件(读后缀名为js的文件,该文件保留了代码格式,容易阅读)。

使用$获取标签体内容。

JQuery对象与JS对象的区别和相互转换

区别: JQuery对象操作对象时更加方便,且JQuery对象与JS对象不是相互通用的。

转换:

JQuery — > JS :JQ对象[索引] 或 JQ对象。get(索引)

JS — > JQ:$(JS对象)

JQuery基本操作

1.事件绑定

$("#id").click(function(){事件出发后需要执行的代码});

2.入口函数

$(function(){需要执行的代码});

3.样式控制

$("#id").css("属性名","属性值");

JQuery选择器

1.基本选择器

名称

语法

含义

标签选择器(元素选择器)

$(“html标签名”)

选择所有匹配标签名称的元素

id选择器

$("#id的属性值")

选择与指定id属性值匹配的元素

类选择器

$(".class的属性值")

选择与指定class属性值匹配的元素

并集选择器

$(“选择器1,选择器2…”)

选择多个选择器中的所有元素

2.层级选择器

名称

语法

含义

后代选择器

$(“A B”)

选择A元素内部的所有B元素

子选择器

$(“A > B”)

选择A元素内部的所有B子元素

3.属性选择器

名称

语法

含义

属性名选择器

$(“A[属性名]”)

选择指定属性的元素

属性选择器

$(“A[属性名=值]”)

选择指定属性等于指定值的元素

4.过滤选择器

名称

语法

含义

首元素选择器

first

获得选择元素中的第一个元素

尾元素选择器

last

获得选择元素中的最后一个元素

非元素选择器

not(selector)

不包括指定内容的元素

偶数选择器

even偶数

从0开始计数

奇数选择器

odd奇数

从0开始计数

等于索引选择器

eq(index)

指定索引元素

大于索引选择器

gt(index)

大于指定索引元素

小于索引选择器

it(index)

小于指定索引元素

header

获得标题(h1~h6)元素

5.表单过滤选择器

名称

语法

含义

可用元素选择器

enable

获得可用元素

不可用元素选择器

disable

获得不可用元素

选中选择器

checked

获得单选/复选框选中的元素

选中选择器

selected

获得下拉框中选中的元素

DOM操作

1.内容操作

html() :获取/设置元素的标签体内容

text():获取/设置元素的标签体的纯文本内容

val():获取/设置元素的value 属性值

2.属性操作

attr():获取/设置元素的属性

removeAttr():删除元素的属性

prop():获取/设置元素的属性

removeProp():删除元素的属性

attr和prop的区别:

操作元素的固有属性,一般使用prop

操作元素自定义属性,一般使用attr

对class属性操作

addclass() : 添加class属性值,不会改变原有样式

removeclass(): 删除class属性值,如果不带参数,则删除所有属性

toggleclass(): 切换class属性 如果元素已有该属性,则删除;如果没有,则添加

class:添加或修改内联样式

3.CRUD操作

名称

格式

含义

append()

对象1.append(对象2)

将对象2添加到对象1元素内部,并且在末尾

prepend()

对象1.prepend(对象2)

将对象2添加到对象1元素内部,并且在开头

appendto()

对象1.appendto(对象2)

将对象1添加到对象2元素内部,并且在末尾

prependto()

对象1.prependto(对象2)

将对象1添加到对象2元素内部,并且在开头

after()

对象1.after(对象2)

将对象2添加到对象1后边,对象1,2是兄弟关系

before()

对象1.before(对象2)

将对象2添加到对象1前边,对象1,2是兄弟关系

insertAfter()

对象1.insertAfter(对象2)

将对象2添加到对象1后边,对象1,2是兄弟关系

insertBefore()

对象1.insertBefore(对象2)

将对象2添加到对象1前边,对象1,2是兄弟关系

remove()

对象.remove()

将对象删除掉

empty()

对象.empty()

将对象的后代元素全部清空,但保留当前元素以及其属性节点

标签:JQuery,框架,对象,元素,添加,选择器,属性

来源: https://blog.csdn.net/GeoffA/article/details/93400463

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值