Jquery +bootstrap 基本用法

193 阅读2分钟

近日,又重拾jquery➕bootstrap,打开官网的第一眼,心想,这是神马东西,好像跟之前有些大大的出入呢,慢慢看下去,嗖噶,不是他变了,是我的脑储存出了差错。😂

下面,就是我近两日边看边进行的总结(勿喷,忘指导!)👇

更新中,长时间未更新可能在神游

jQuery

介绍

它是神马呢,--> 一个轻量级的javascript库,基础语法是: $(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

jquery的一些事件

Event 函数绑定函数至
$(document).ready(function)将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

jquery的一些行为

hide()、show()

$(selector).hide(speed,callback) 隐藏selector元素

$(selector).show(speed,callback)显示selector元素

speed 参数:可选的,规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒

callback 参数:可选的,是隐藏或显示完成后所执行的函数名称

toggle()

$(selector).toggle(speed,callback)

可以使用 toggle() 方法来切换 hide() 和 show() 方法

显示被隐藏的元素,并隐藏已显示的元素

stop()

stop() 方法停止当前正在运行的动画

$(selector).stop(stopAll,goToEnd)

stopAll参数: 可选,规定是否停止被选元素的所有加入队列的动画

goToEnd参数:可选, 规定是否允许完成当前的动画,该参数只能在设置了 stopAll 参数时使用

animate()

animate() 方法执行 CSS 属性集的自定义动画。CSS样式将元素从一个状态改变为另一个状态,CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")

  • 语法一:$(selector).animate(styles,speed,easing,callback)

    • styles: 必须,CSS 样式和值
    • speed:可选,动画的速度,默认是normal
    • easing:可选,规定在不同的动画点中设置动画速度的 easing 函数(内置的 easing 函数:swing()、linear())
    • callback:可选,animate 函数执行完之后,要执行的函数。
  • 语法二:$(selector).animate(styles,options)

    • styles:必须

    • options:可选,规定动画的额外选项。

      •     speed - 设置动画的速度
      •     easing - 规定要使用的 easing 函数
      •     callback - 规定动画完成之后要执行的函数
      •     step - 规定动画的每一步完成之后要执行的函数
      •     queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
      •     specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

jquery中的获取和设置

  • $(selector).text() - 获取所选元素的文本内容
    • $(selector).text("Hello world!"),即设置选择器中的文本
  • $(selector) .html() - 获取所选元素的内容(包括 HTML 标记)。比如获取到

    文字

    • $(selector).html("Hello world!"),设置选择器中的文本,展示为Hello world! (加粗的文本)
  • $(selector).val() - 获取表单字段的值。比如链接中 href 属性的值
    • $("input").val("ezylf"),设置input表单值为 -->ezylf

text()、html()、val() 的回调函数由两个参数:被选元素列表中当前元素的下标、以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); });

  • (selector).attr()用于获取属性值。如获取链接中href的属性值,(*selector*) **.attr()** - 用于**获取**属性值。如获取链接中href的属性值,("#divbox").attr("href")
    • 有参数时,可用来设置/改变属性值,如,$('input').attr('placeholder','你看,我变了')

      • 回调函数
      •     $("button").click(function(){ $("input").attr({ "value" : '这是值', "placeholder" : "请输入哟~" }); });

\