Jquery之基础知识开篇(二)

1.mouseover事件跟mouseout事件的区别

  • mouseover/mouseout事件,鼠标经过的时候会触发多次,每遇到一个子元素就会触发一次。
  • mouseenter/mouseleave事件,鼠标经过的时候只会触发一次

2.jQuery对象跟DOM对象相互转换:

jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如:

 //错误写法
$("#test").innerHTML
document.getElementById("id").html()  
//正确写法
$("#test").html()
document.getElementById("id").innerHTML;

注意:

  • 用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。

  • 如果一个获取的是 jQuery对象,我们习惯在变量前面加上$,如:var $variab = jQuery对象;如果获取的是DOM对象,则与习惯普通一样:var variab = DOM对象;以此来区分jQuery对象跟dom对象。

jQuery对象转换成DOM对象:

//两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
方式一:
$(“#btn”)[0]
或
var $btn =$("#btn") ; //jQuery对象
var btn=$btn[0]; //DOM对象
alert(btn.checked) //检测这个checkbox是否被选中
方式二:
$(“#btn”).get(0)
或
var $btn=$("#btn"); //jQuery对象
var btn=$btn.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转换成jQuery对象(转换后,就可以任意使用jQuery的方法):

//inw已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了
$(document)     -> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“bt n”);
$btn =$(btn);

注意:

  • DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
  • 事件处理中,this 表示 DOM 对象 $(this) 表示 jQuery 对象

3.jQuery操作DOM

复习:
选择器
基本选择器:#id 、.class 、element、* 、
层级选择器: 空格、>、+、~
基本过滤选择器::first、:last、:eq(index)、:lt(index)、:gt(index)、:odd、:even
筛选选择器:.eq(index)、.children()、.parent()、.siblings()、.find()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,228评论 0 8
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 11,005评论 0 106
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,830评论 18 503
  • 下午无事,闹市买衣。 买衣服是一件苦差事,尤其是自己一个人在买。 长相不变,换换衣服如同换汤不换药,所以对镜换衣,...
    吴在宥阅读 3,342评论 0 0
  • 一年就是五十通电话
    fupeng阅读 1,571评论 0 0

友情链接更多精彩内容