进阶-14

jQuery 能做什么?

jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如js很多方法名很冗长,jquery封装后方法就变得简便了,也考虑到了跨浏览器兼容问题,这样我们用js时需要考虑的很多问题它都帮我们解决了,这样我们使用时就比js代码要方便,高效的多。

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

  • 区别:
    jquery对象通常用jquery的方法$(’’)来得到,可以使用jquery提供的方法来操作html的数据
    DOM原生对象只能用js提供的方法,如getElementById,getElementByTagName,有的获取的是一个元素,有的获取的是一个数组。
  • 转化方法:
    普通dom对象转化成jq对象的方法
    普通的dom对象的话只需要用$()包裹一下就好了
var yangchenjian=document.getElementById("yangchenjian"); // 原生获取
var $yangchenjian = $(yangchenjian) 
    ‘$(yangchenjian)  //这就算是把原生的转化成jq对象了经过转化jq封装好的api就可以正常使用了’

** jq对象转化成原生对象 **
通过jquery自身提供的.get[index] 这个方法来完成转化

var yangchenjian=document.getElementById("yangchenjian");
var $yangchenjian = $(yangchenjian) ;
var yangchenjian = $yangchenjian.get[0]; //完成原生转化


jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

  • jQuery中如何绑定事件
现在常用的事件代理方法是on方法,
on(events,[selector],[data],fn)
- events: 触发的事件类型 点击 双击 等等
- selector: 事件委托的时候用,用于过滤器的触发事件的选择器元素的后代
- data: 当一个事件被触发时要传递event.data给事件处理函数。
- fn: 用户触发后要做的事情是个函数方法

----------------------------下面写关于on的例子-------------------------------

$('p').on('click',function(){
 alert('1234')
})
//阻止默认事件
$('from').on('submit',function(e){
 e.stopPropagation();
})
//事件委托 只有ul内部中的li才能触发事件p标签是没有触发效果的
$(document).ready(function () {
function test(e) {
 console.log($(this).text())
 console.log(e.data.name)
} 
$('.yu').on('click.la','li', {name: "杨晨健"},test)

})

 
  • hahha
  • ahdkada
  • dadada
  • adadadadadadada

//取消li中的触发事件 $('.yu').off('.la') 一定要注意应该是.事件名才行,别忘了带上‘.’
  • 推荐使用on方法来完成事件绑定,同时应该记住 .off( events [, selector ] )方法用来对应on的绑定方法。注意:多个事件绑定的时候最好给触发事件取一个名字,这样解绑事件的时候不至于一下子全给解绑了 例子:node.on('click.eventname',function(){}) 解绑的时候就用node.off('.eventname')

  • bind 早期的事件绑定方法,现在已经被弃用了,unbind是其对应的解绑事件的方法。

  • delegate(selector,[type],[data],fn) 用来执行事件委托(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

  • live(type, [data], fn),给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效,但是在1.7之后已经不被推荐使用了,如果想添加事件处理就用on方法就好,如果用的是老版本的jq就用delegate来代替live


jQuery 如何展示/隐藏元素?

show()方法完成元素的展示
hide()方法完成元素的隐藏



  
  • hahha
  • ahdkada
  • dadada
  • adadadadadadada

jQuery 动画如何使用?




  
  
  
  Document
  
  


  
  

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

//获取元素内部HTML
$('selector').html()

//获取元素内部文本
$('selector').text()

//设置元素内部HTML
$('selector').html(' 内容放在里面 ')

//设置元素内部文本
$('selector').text(' 内容放在里面 ')

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

//设置表单的内容
$('selector').val('请输入您的账号')

//设置元素属性
$('selector').attr('name','野猪'):设置该元素中的name属性值为 野猪;

//获取用户输入内容
$('selector').val()

//获取元素属性
$('selector').attr('name'):获取该元素中的name属性;

题目8-11代码展示

8-代码展示

9-代码展示

10-代码展示

11-代码展示

你可能感兴趣的:(进阶-14)