美文网首页
jQuery学习 2020-06-23

jQuery学习 2020-06-23

作者: 长大吃可爱多 | 来源:发表于2020-06-23 22:09 被阅读0次

1.jQuery的静态map方法

jQuery的map方法和each方法的区别
1.each的默认返回值的遍历谁就返回谁
   map的默认返回值是一个空数组
2.each不支持在回调函数中对遍历的数组进行处理
   map静态方法可以在回调的函数中对遍历的数组进行处理

2.jQuery的其他静态方法

(1)去除字符串两端的空格  $.trim(str)
(2) 判断传入的对此是否是window对象  $.iswindow(win)
(3) 判断传入的是否是数组 $.isArray(arr)  真数组返回true
(4) 判断是否是函数  $.isFunction(fun)
$.isFunction(jQuery)  // true  说明jQuery是一个函数  jQuery是一个匿名函数

3.jQuery holdReady方法
在jQuery中,在DOM加载完成之后会立即执行入口函数,但是如果想要暂停入口函数的执行,可以使用$.holdReady(true)就可以暂停入口函数的执行了。如果想要继续入口函数的执行,可以使用$.holdReady(false)
4.jQuery内容选择器

(1) :empty 选择既没有文本也没有子元素的节点
  var div1 = $("div:empty")  找到既没有文本也没有子元素的选择器
(2) :parent 找到有文本内容或者子元素的节点
(3) :contains("strTest")  包含"strTest"指定文本内容的节点
(4) :has("span")  包含子指定子元素span的指定元素

5.jQuery属性节点
js中可以获取属性节点也可以删除属性节点

在jQuery中设置属性节点的方式有两种(一个参数是添加 两个参数是设置)
(1) $("span").attr("class1","classStyle1")
(2) $("span").prop("class2","classStyle2")
删除属性节点的方式也有两种
(1) $("span").removeAttr("class1")
(2) $("span").removeProp("class2")
如何选择使用这两种方式? 如果是需要的返回结果是true/flase的类型就使用prop的方式,其他的就选择attr的方式。

6.jQuery操作class样式

 使用jQuery动态的操作已有的class
 addClass("class1 class2")  // 添加class 样式 class1 和class2  两个class用空格隔开
 removeClass("class1")   //删除class
 toggleClass("class2")   // 切换class 有就删除 没有就添加

7.jQuery获取/设置文本值

1,设置带有文本标签的文本 
 $("div").html("<p>html设置测试</p>");     // 相当于JS中的innerHTML
 $("div").html();     //获取html的文本内容  相当于JS中的innerHTML()
2.设置文本
$("div").text("文本设置测试")    //相当于JS中的innerText()
$("div").text()    //获取JS中的文本内容
3.设置DOM元素的值
$("div").value('测试值的设置');   //给DOM元素设置值
$("div").value()  //获取DOM元素的值

8.jQuery操作css样式

1.jQuery逐个设置样式
$("div").css("width","300px");
$("div").css("height","300px");
2.jQuery链式设置样式
$("div").css("width","300px").css("height","300px");
3.批量设置(推荐)
$("div").css({
  width:"100px",
 height: "200px"
});
4.获取css的样式值
$("div").css("width");  //获取css的宽度

9.jQuery的位置操作

1.offset: 获取元素距离窗口的位置
//获取元素距离左侧窗口的偏移量
$(".class1").offset().left
//设置元素距离左侧的偏移量
$(".class2").offset({
  left: "20px"
})
2.获取元素的position定位
$(".class1").position().left
jQuery 不能直接设置position

10.jQuery scrollTop

// 获取元素内部滚动条滚动的偏移位
$(".scroll").scrollTop()
//设置滚动的偏移位
$(".scroll").scrollTop(100);
//获取网页的滚动偏移位
$("body").scrollTop() + $("html").scrollTop();//为了保证浏览器的兼容

11.jQuery中两种绑定事件的方式

  1.eventName(fn)    //编码效率高  部分事件jQuery没有添加 所以部分事件不能使用
      $("button").click(function() {})
  2.on(event,fn)       //编码效率偏低 都可以使用
     $("button").on("click",function() {});
注意点:注册多个相同或者不同类型的事件不会被覆盖 

12.jQuery事件的移除
off移除事件

  $("button").off();  //不传递参数 ,移除所有事件
  $("button").off("click");     //移除所有的click事件
 $("button").off("click",test1);  //传递2个参数  移除指定类型的指定事件

13.jQuery的事件冒泡和默认行为

1.什么是事件冒泡?
  在父子级关系的DOM元素中,父元素的事件会传递给子元素的事件,这一现象就i是事件的冒泡
2.如何阻止事件的冒泡
   (1) 可以在子元素的事件函数中 "return false" 的方式来阻止事件的冒泡
   (2) 可以在子元素的事件函数中使用到event参数 event.stopPropagation()
3. 什么是默认行为
   例如像a标签会默认的跳转、submit表单会默认提交并跳转等行为是默认行为
 4.如何阻止默认行为
    (1) 在事件中使用"return false" 来阻止默认行为
    (2) 在事件中使用event.preventDefault()

14.jQuery事件默认触发

 jQuery事件函数自动触发
1.$(".son").triggle(click);
2.$(".son").triggleHandle('click');

相关文章

  • jQuery学习 2020-06-23

    1.jQuery的静态map方法 2.jQuery的其他静态方法 3.jQuery holdReady方法在jQu...

  • jQuery

    jQuery学习: 最好的学习方法:查看jQuery的API jQuery下载: jQuery官网:http://...

  • 锋利的jquery学习

    锋利的jquery学习 @(Jquery) [TOC] jquery环境配置 从官网上下载jquery.js文件,...

  • Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例: 使用jquery案例: jquery 快...

  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常...

  • jQuery概述

    jQuery简介 jQuery就是一个封装了很多方法的javaScript库。我们学习jQuery,其实就是学习j...

  • JQuery简单入门

    第一章:jQuery 简介 为什么要学习jQuery? 什么是jQuery? jquery的官网:http://j...

  • 2019-01-08

    我的jQuery学习 jQuery库是一个JavaScript文件 1.在jQuery...

  • 2018-06-12

    从零玩转jQuery-初识jQuery 课前须知: 学习jQuery前必须先掌握JavaScriptjQuery虽...

  • jQuery ajax——参数详解

    详细学习jQuery ajax 用法 环境依赖jQuery (我用的是 jQuery v1.11.2) 通用写法$...

网友评论

      本文标题:jQuery学习 2020-06-23

      本文链接:https://www.haomeiwen.com/subject/ovyhfktx.html