了解JQuery

什么JQuery:
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
jq是通过js实现的,不是为了完全替代js

生产版本:体积小,执行速度快

开发版本:有良好的注释,代码风格好,便于阅读
优点:
1.写更少的代码,做更多的事情,简化代码量
2.js 和 html 分离
为什么要学习jq
提高工作效率
自定义框架
JQ的入门
【JQ中根据ID查找元素】
html
全都是根据选择器去找的
#ID{}
.类名{}
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ID的名称") jq的开发步骤…(function(){}): 页面初始化之后,绑定事件,动画
3.确定相关操作的事件
4.事件触发函数(回调函数)
5.函数里面去操作相关的元素

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

-ID选择器 : #ID的名称

  • 类选择器: 以 . 开头 .类名
  • 元素选择器: 标签的名称
  • 通配符选择器: *
  • 选择器,选择器: 选择器1,选择器2
JQ中的层级选择
  • 子元素选择器: 选择器1 > 选择器2
  • 后代选择器: 选择器1 儿孙
  • 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
  • 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
JQ中的基本过滤器
JQ中的属性选择器
JQ中的表单过滤器

JQ和JS之间的转换

  • JQ对象,只能调用jq的属性和方法

  • js对象,只能调用js的属性和方法
    jq选择器

  • 基本选择器

    • ID #id名
    • 类选择器 .类名
    • 元素选择器 标签名称
    • 通配符选择器 *
    • 并集选择器 选择器1,选择器2
  • 层级选择器

    • 后代选择器 选择器1 选择器2
    • 子元素选择器 选择器1>选择器2
    • 相邻 +
    • 所有弟弟 ~
  • 过滤选择器

    • 第一个元素 :first
    • 最后一个 :last
    • 偶数 :even
    • 奇数 :odd
    • 大于 :gt
    • 小于 :lt
    • 等于 :eq
  • 属性选择器

    • 选择器[属性] 单个属性
    • 选择器[属性1 ] [属性2 ] 多个属性
    • 选择器[] [属性= 属性值] 确定的属性值
  • 表单过滤器

    • :text
    • option:selecte
  • js和jq的转换

    • js转jq
      • $(js对象)
    • jq转js
      • jq对象[0]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值