侧边栏壁纸
博主头像
惊羽博主等级

hi ,我是惊羽,前生物学逃兵,现系统工程沉迷者 . 贝壳签约工程师 , 曾被雇佣为 联拓数科 · 支付研发工程师 、京东 · 京东数科 · 研发工程师、中国移动 · 雄安产业研究院 · 业务中台技术负责人 .

  • 累计撰写 100 篇文章
  • 累计创建 14 个标签
  • 累计收到 9 条评论

JQuery(1) - 基础语法

惊羽
2021-03-16 / 0 评论 / 0 点赞 / 137 阅读 / 3,029 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2021-06-18,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 理解

1.1 概述

jquery是一个优秀的javascript的轻量级框架之一,兼容css3和各大浏览器,提供了dom、events、animate、ajax等简易的操作。并且jquery的插件非常丰富,大多数功能都有相应的插件解决方案。jquery的宗旨是write less do more。

js---->jquery----->插件(功能)

1.2 jquery的下载与引入

下载:www.jquery.com
引入:在需要使用jquery的html中使用js的引入方式进行引入

	script : type="text/javascript" src="jquery-1.11.0.min.js"

1.3 jquery与js的区别

jquery本质上虽然也是js,但如果使用jquery的属性和方法那么必须保证对象是jquery对象而不是js对象。使用js获取的对象是js对象,使用jquery方式获取的对象是jquery对象。两者的关系与区别总结如下:

1.3.1 jquery对象与js对象之间的转换

js对象转换成jQuery对象,语法:$(js对象)
jQuery对象转换成js对象,语法:jquery对象[索引]或jquery对象.get(索引)

1.3.2 事件的写法不同,意义相同

js的事件的写法:js对象.onclick = function()
jquery的事件的写法:jquery对象.click( function()
)

1.3.3 js的页面加载完毕与jquery的页面加载完毕

js的页面加载完毕:window.onload = function()
jquery的页面加载完毕:$(document).ready(function()
)
两者区别:

1.3.3.1 jquery的页面加载完毕有简写形式:$( function() )
1.3.3.2 jquery的页面加载完毕事件可以写多次,而js只能写一次,写多次也只会执行最后一次

2. jquery的选择器

jquery的选择器与css的选择器的作用是完全一样的,目的是精确快速的定位到某个html元素上并获取该元素对象,进而使用juery的方法对该html进行操作。
jquery常用的选择器有如下:
基本选择器,层级选择器,属性选择器,基本过滤选择器,表单属性选择器等

jquery基本 $(选择器)

2.1 基本选择器

标签选择器(元素选择器):$("html标签名")
id选择器:$("#id的属性值")
类选择器:$(".class的属性值")

2.2 层级选择器

获得A元素内部的所有的B元素:$("A B ") --- 后代选择器
获得A元素下面的所有B子元素:$("A > B")
获得A元素同级下一个B元素:$("A + B")
获得A元素同级所有后面B元素:$("A ~ B")

2.3 属性选择器

获得有属性名的元素:$("A[属性名]")
获得属性名 等于 值 元素:$("A[属性名=值]")
获得属性名 不等于 值 元素:$("A[属性名!=值]")
获得属性名 以 值 开头 元素:$("A[属性名^=值]")
获得属性名 以 值 结尾 元素:$("A[属性名$=值]")
获得属性名 含有 值 元素:$("A[属性名*=值]")
复合属性选择器,多个属性同时过滤:$("A[属性名!=值][属性名!=值][属性名!=值]")

2.4 基本过滤选择器

获得选择的元素中的第一个元素: :first
获得选择的元素中的最后一个元素: :last
不包括指定内容的元素例如: :not(selecter)
偶数,从 0 开始计数: :even
奇数,从 0 开始技术: :odd
指定第几个: :eq(index)
大于n个: :gt(index)
小于n个: :lt(index)

2.5 表单属性选择器

可用: :enabled
不可用: :disabled

3. jquery的操作方法

3.1 jquery的DOM操作方法

3.1.1 html代码/文本/值/属性:html()/text()/val()

html() === innerHTML
text() === innerText
val() === value

html text val 传递参数代表赋值 空参代表获取

3.1.2 html属性操作:attr()/prop()

attr() === setAttribute和getAttribute

attr(属性名称); --- 获取属性的值
attr(属性名称,属性值) --- 设置的属性的值

3.1.3 html的class属性操作:addClass() removeClass()

addClass(值) === attr(“class”,值)
removeClass(class值) === removeAttr(“class值”)

3.1.4 html的样式的操作:css()

css() ==== js对象.style.属性
css(css属性名) 获取css属性名称对应值
css(css属性名,值) 设置css样式

3.1.5 html的元素的创建:$(“标签”);

$(“

  • ”) === createElement(“li”)

    3.1.6 html的内部插入:append() prepend()

    append() === appendChild
    prepend() 加入所有子元素的最前面

    3.1.7 html元素的删除操作:remove()

    注意:jquery中的大部分方法是集设置值与获取值为一体的

    3.2 jquery的效果

    3.2.1 元素的显示与隐藏

    show(speed ,fn) 显示
    参数 speed,显示速度,单位:毫秒。固定字符串:slow, normal, or fast
    参数 fn,显示成功之后回调函数。
    hide() 隐藏
    toggle() 切换

    3.2.2 元素的滑动显示与隐藏

    slideDown() 显示,高度变大。
    slideUp() 隐藏,高度变小。
    slideToggle() 切换

    3.2.3 元素的淡入淡出的显示与隐藏

    fadeIn() 显示
    fadeOut() 隐藏
    fadeToggle() 切换

    补充:js页面的编码方法
    encodeURI() : 编码
    decodeURI() : 解码

    function函数是否要定义在页面加载完毕事件内部

    0
    广告 广告

    评论区