jQuery选择器、Dom操作、样式、事件处理

1.库和框架的区别?

  • 库:就是API函数库,提供API供你调用。库内部已经做了各种底层的封装,以及各种兼容问题的处理,工作中调用库内的API接口就能实现需要的功能,不需要额外的代码来处理函数封装和兼容问题,让代码更简洁,效率更高。库就像是一个工具盒,需要什么工具就从库中调用。

使用库的过程就是根据所需的功能,查文档,再调用库内的对应的API接口。

  • 框架:提供一套完整的解决方案,你按照方案来操作以实现需求。

使用框架的过程就是先查文档,再照着文档写代码,出错了再查文档。

2.jquery 能做什么?

jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用, 让我们实现功能时不用再为兼容性而困扰,少写了许多代码。

实现一个目的需要很多步骤,使用原生js,就需要每个步骤都写出来,jQuery就把这些步骤打包封装进一个函数中,做成一个API,用户调用这个API,提供参数,就能一步实现目的,简洁高效。

3. jquery 对象和 DOM 原生对象有什么区别?如何转化?

  • DOM对象 :W3C标准用于操作文档的API。具体点来说就是指 HTML 文本中的所有被标签标记的东西 ,在js里可以用 getElementById 等传统的方法获得的对象,拥有原生对象的属性和方法。
  • jQuery对象:将DOM原生对象进行封装后得到的类数组对象,它是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。
var domObj = document.getElementById('id'); //DOM对象 
var obj=('#id'); //jQuery对象;

注意:在jQuery对象中无法使用DOM对象的任何方法。同样,DOM对象也不能使用jQuery方法。

jquery提供了两种方法将一个jquery对象转换成一个dom对象,[index]和get(index)。

var cr=('#html'); //jquery对象 
var cr = cr[0];//dom对象,也可写成var cr=cr.get(0); 

Paste_Image.png

对于一个dom对象,只需要用()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);

var cr=document.getElementById('html'); //dom对象 
var cr= $(cr); //转换成jquery对象

Paste_Image.png

5.jquery事件绑定

1.普通事件绑定:

//事件一
$("#btn").on("click",function(){
    console.log("我被点击了");
})
//事件二,给事件添加命名空间,下面的.myClick 就是添加的命名空间,用来标识本次事件,删除事件的时候方便指定
$("#btn").on("click.myClick",function(){
    console.log("糟糕,我怎么又被点击了");
})

$("#btn").off("click.myClick")  // 仅仅解绑了上面添加命名的事件二,不会解绑事件一

2.事件代理

// 事件委托或者事件代理,想让div下面所有的span绑定事件,可以把事件直接绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

3.可以在绑定的时候给事件处理程序传递一些参数

$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

6.bind、unbind、delegate、live、on、off都有什么作用?

  • bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

$(selector).bind(event,data,function)

$("#btn").bind("click.myClick", function() {
  console.log("我被点击了")
})

Paste_Image.png

  • unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过 jQuery 附加的事件处理程序。

$(selector).unbind(event,function)

//移除所有 p 元素的事件处理函数:
$("button").click(function(){
  $("p").unbind();
});

Paste_Image.png

  • delegate:用于事件代理,为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数;适用于当前或未来的元素(比如由脚本创建的新元素)。

$(selector).delegate(childSelector,event,data,function)

Paste_Image.png

$("ul").delegate("li", "click", function() {
  var text = $(this).text()
  console.log(text)
})
  • live()方法将监听器绑定在了document上,不把监听器绑定在匹配的元素上。利用事件委托机制,把节点处理委托给document。

$(selector).live(event,data,function)

Paste_Image.png

//当点击按钮时,隐藏或显示 p 元素:
$("button").live("click",function(){
  $("p").slideToggle();
});
  • on() 方法在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。

$(selector).on(event,childSelector,data,function,map)

Paste_Image.png

//普通事件绑定
$("#btn").on("click",function(){
  console.log("我被点击了")
})
  //事件代理绑定
$("ul").on("click", "li", function() {
  var text = $(this).text()
  console.log(text)
})
  • off() 方法通常用于移除通过 on()方法添加的事件处理程序。

$(selector).off(event,selector,function(eventObj),map)

Paste_Image.png

$("#btn").off("click.myClick")

推荐使用:on方法,因为既能普通绑定事件,也能事件代理绑定。自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,简化了 jQuery 代码库。 注意:on的事件代理和delegate的事件代理,写法不一样,子元素和事件监听函数的位置不同

//on的事件代理 
$("ul").on("click", "li", function() {
  var text = $(this).text()
  console.log(text)
})
//delegate的事件代理
$("ul").delegate("li", "click", function() {
  var text = $(this).text()
  console.log(text)
})
//li和click的位置不一样

5.jquery 如何展示/隐藏元素?

.show([speed], [callback]):显示元素 .hide([speed], [callback]):隐藏元素 .toggle([speed], [callback]): 如果元素是最初显示,它会被隐藏;如果隐藏的,它会显示出来 .fadeIn([speed], [callback]):通过淡入的方式显示匹配元素。 .fadeOut([speed], [callback]):通过淡出的方式隐藏匹配元素。 .fadeToggle([speed], [callback]):淡入淡出的方式显示隐藏元素,隐藏显示元素 .fadeTo(speed, opacity,[callback]):通过匹配元素的不透明度做动画效果。 .slideUp([speed], [callback]):以滑动的方式隐藏匹配的元素 .slideDown([speed], [callback]):以滑动的方式显示匹配元素

speed:规定速度,取值:'slow', 'normal', 'fast'或毫秒 callback:显示或隐藏后执行的函数 opacity:透明度(0~1)

$('#btn-box1').on('click',function(){
            $('.box').show(3000);
            //$('.box').fadeIn();
            //$('.box').slideDown('slow');
        })
        $('#btn-box2').on('click',function(){
            $('.box').hide(3000);
            //$('.box').fadeOut('slow');
            //$('.box').slideUp('slow');
        })

6. jquery 动画如何使用?

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

$(selector).animate(styles, speed, easing, callback)

参数说明:

  • style:必须,规定产生动画效果的CSS
  • speed:可选,规定动画的速度,默认是normal,可能的值:数字(毫秒,比如5000)、'slow'、'normal','fast'
  • easing: 可选,规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数: swing, linear
  • callback: 可选,animate 函数执行完之后,要执行的函数。
var css = {
  width: "100px",
  opacity: 0.8,
  marginRight: "800px",
  fontSize: "200px"
}
$(".box").animate(css, "slow", "linear", function(){
  console.log("动画播放成功")
})

7.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

.html(string) 用于获取/修改匹配元素的innerHTML 无参数时,返回元素的innerHTML 有参数时,修改元素的innerHTML为参数值 .text(string) 用来得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。 无参数时,获取元素内部文本 有参数时,设置元素内部文本为参数值

获取内容:

$(".box").html() //获取元素内部的html内容,类似于innerHTML
$(".box").text() //获取元素内部的text文本,类似于innerText

设置内容:

$(".box").html("<p>设置了一个段落</p>")//设置了元素内部的html内容,标签生效
$(".box").text("设置了一个文本")//设置了元素内部的text文本,标签不生效

注意:如果结果是多个时进行赋值操作的时候会给每个结果都赋值;如果结果是多个,获取值的时候,返回结果集中的第一个对象的相应值

9.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

  • val() 方法返回或设置被选元素的 value 属性,通常与 HTML 表单元素一起使用。

当用于返回值时:返回第一个匹配元素的 value 属性的值。 当用于设置值时:设置所有匹配元素的 value 属性的值。

//返回 value 属性:
$(selector).val()
//设置 value 属性:
$(selector).val(value)
  • attr()方法用来设置或返回被选元素的属性和值。

当该方法用于返回属性值时:返回第一个匹配元素的值。 当该方法用于设置属性值时:为匹配元素设置一个或多个属性/值对。

//返回属性的值:
$(selector).attr(attribute)
//设置属性和值:
$(selector).attr(attribute,value)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

JavaScript 实现 Tab 点击切换

Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScri...

522
来自专栏HTML5学堂

详析设置样式的方法

上一期文章当中,小编与大家详细的总结了获取标签的方法,能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签,可以回复“获取标签”到“HTML5学堂”...

2997
来自专栏偏前端工程师的驿站

Java魔法堂:注释和注释模板

一、注释                                     1. 注释类型      [a]. 单行注释 // 单行注释 String ...

1886
来自专栏Android先生

Android开发人员不得不学习的JavaScript基础(二)

window对象是BOM的核心,window对象指当前的浏览器窗口,window对象中有很多种方法供开发者调用:

843
来自专栏debugeeker的专栏

《coredump问题原理探究》Linux x86版3.3节栈布局之局部变量

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

391
来自专栏移动开发

Android 中 getString() 方法的小知识点

其实 Android 中 Activity ,Fragment 等中其实已经给我封装了更简便的方法,我们可以直接采用如下方法

706
来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

3299
来自专栏一枝花算不算浪漫

[Java面试九]脚本语言知识总结.

33313
来自专栏拭心的安卓进阶之路

Java 基础巩固:再谈抽象类和接口

文章出自:安卓进阶学习指南 主要贡献者: Milo Struggle shixinzhang 背景介绍 ? 大家好,这篇文章是 《安卓进阶技能树计划》 的...

18810
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

703

扫码关注云+社区