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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

Vue-组件嵌套之——父组件向子组件传值

4789
来自专栏代码世界

jQuery

jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Docum...

5185
来自专栏极乐技术社区

微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片

实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件...

3099
来自专栏跟着阿笨一起玩NET

display:none与visible:hidden的区别

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

831
来自专栏极乐技术社区

wxss学习系列《一》定位(position),布局(Layout)

定位(position) 2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是...

33510
来自专栏从零开始学自动化测试

appium+python自动化30-list定位(find_elements)

前言 有时候页面上没有id属性,并且其它的属性不唯一,平常用的比较多的是单数(element)的定位方法,遇到元素属性不唯一,就无法直接定位到了。 于是我们可...

5017
来自专栏xingoo, 一个梦想做发明家的程序员

CListBox

CListBox 一:词条简介 CObject←CCmdTarget←CWnd←CListBox CListBox类提供Windows列表框的功能。列表框显...

1898
来自专栏九彩拼盘的叨叨叨

Vue1.x 写法示例

常见内置过滤器 capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

923
来自专栏九彩拼盘的叨叨叨

学习前端 第6周 第2天

682
来自专栏柠檬先生

jquery 表单事件

.blur()    当元素失去焦点的时候触发事件。   .blur(handler(eventObject))     handler(even...

2069

扫码关注云+社区

领取腾讯云代金券