Jquery DOM操作

库和框架的区别?

框架也算是库的一种,但倾向于重量级一些,倾向于提供整套的解决方案,倾向于创造一些需要你来遵守的规则和范例。

比如 AngularJS 就算是一个框架,因为它提供了一整套的解决方案,需要你按照它设计好的方式来写代码。而 jQuery 的分类则比较模糊一些,可以说是库,也可以说是框架。

简单来说,当使用框架时,你需要按照框架的规则来code;而试用库时,你只需要调用库中的方法来满足你自己的需求即可,思想还是自己的。

jQuery 能做什么?

jQuery的精髓是"write less, do more",意味它帮你封装了大量解决兼容性后的常规方法,你只需要合理的调用这些简化后的方法即可。
常用的方法有:
1.方便操作DOM元素
2.动态修改页面样式
3.为页面添加动态效果(如:淡入淡出)
4.统一AJAX操作
5.简化常见的js任务

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

DOM对象是通过原声JS代码来获取的对象,也只能用原生JS进行操作;
jQuery对象是通过jQuery选择器获得对象,可以用jQuery方法进行操作;jQuery对象是一个类数组,类数组中的元素是DOM对象(可以为空)。
DOM对象—>jQuery对象:(用$()来包裹)

<div id="test"></div>

var dom = document.getElementById("test");       //<div id=​"test">​</div>​
var $jquery = $("#test");                       // [<div id=​"test">​</div>​]
$(dom);                                         //[<div id=​"test">​</div>​]

jQuery对象 —> DOM对象: .get(index)或是.[index]

$jquery[0];                   //<div id=​"test">​</div>​
$jquery.get(0);              //<div id=​"test">​</div>
$jquery.eq(0);               //​[<div id=​"test">​</div>​]  ;  eq()还是jQuery对象。

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

jQuery中有很多绑定事件的方法:

  • .bind()
  • .live()
  • .delegate()
  • .on()

其中,上面三个是早期jQuery版本的方法,现在统一用on()即可,但是我们也可以了解一下其中的思想。

.bind():该方法用于直接将事件绑定在选中的元素上,所以.bind()在绑定事件的时候被选的元素必须存在;使用一次.bind()选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind()才行;

.unbind():是与.bind()相对应解绑的方法,该方法的参数为所解绑的事件,若无参数则解绑所有事件。

.live():
默认使用了事件代理(绑定在祖先元素上的事件处理程序可以对后代上触发事件作出回应),没有将事件直接绑定在该元素上,而是绑定在document
元素上(DOM树的根节点),所以很不方便,不建议使用。

<body>
       <div class="clickme">Click here</div>
</body>
<script>
$('.clickme').live('click', function() {
         alert("Live handler called."); //事件冒泡`document`元素上,查看事件类型是否是click
            //目标元素和选择器.clickme否匹配, 
            //是则执行绑定的事件处理函数;
});
</script>

.delegate():对于早期jQuery版本(1.7以前),.delegate是使用事件代理最有效的方式,

<div style="background-color:red">
    <p>这是一个段落。</p>
    <button>请点击这里</button>
</div>

<script>
    $('div').delegate('button','click',function(){ 
        $('p').slideToggle();          //将事件绑定到$('div')上,事件冒泡到$('div')上
})                                     //查看是不是click事件,目标元素是不是button,如果都满足,就执行函数
</script>

.on():(1.7版本后.on()取代了.bind(),.live(),.delegate(),提供绑定事件处理的所有功能,强烈推荐!

$("body").on("click", "p", function(){ 
    alert( $(this).text() );      //当点击段落时,显示该段落中的文本
});

.off():移除用.on()绑定的事件处理程序。

jQuery 如何展示/隐藏元素?

  • 隐藏:.hide(speed,callback)
    其中speed为毫秒数(也可以是fast,nomal,slow这些字符),callback是回调函数,意为当经过speed后执行回调函数,两者均为可选参数;
  • 显示:.show(speed,callback)
    参数同上
  • 取反:.toggle(speed,callback)
    参数同上,意为当前为hide则show,当前为show,则hide;`

jQuery 动画如何使用?

jQuery自己设定了几种动画模式:

  • slideUp(speed),slideDown(speed),slideToggle(speed)
    经过实验可知,hide()和show()都是从左上角逐渐收缩或展开的,slideUp()与slideDown()则提供了从垂直方向上的收缩或展开,同理slideToggle()则是根据具体情况来判断是收缩还是展开;
  • fadeIn(speed)fadeOut(speed)fadeToggle(speed)
    这是淡入淡出效果,其原理是不断地调整DOM的opacity,用法和字面效果相同;
  • 请参考更多的效果API

当然更加强大的是用animate({params},speed,callback*)来自定义动画:
参数分别为:

  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。

需要注意的是{params}中的CSS属性要按照JavaScript的规则写,如:background-color应写成backgroundColor;
同时animate队列是通过调用多个animate()动画,从而按照顺序逐一实现动画效果,如

$("button").click(function(){ 
      var div=$("div"); 
      div.animate({height:'300px',opacity:'0.4'},"slow"); 
      div.animate({width:'300px',opacity:'0.8'},"slow");  
      div.animate({height:'100px',opacity:'0.4'},"slow");    
      div.animate({width:'100px',opacity:'0.8'},"slow");
}); 

还有快速终止,或停止动画的方法:

  • finish() 迅速完成动画至最终状态;
  • stop() 停止队列中当前位置的动画,直接转入队列中的下一个位置;

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

  • 获取HTML:$(selector).html();
  • 修改HTML:$(selector).html(anything);
  • 获取文本 : $(selector).text();
  • 修改文本 : $(selector).text(anything);

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

  • $(selector).val()获取匹配元素的当前(输入/选择)值,如果多选,将返回一个数组,其包含所选的值。例如:
    如果select元素中 没有选择项被选中,它返回null;
    如果select元素有multiple(多选)属性,并且至少一个选择项被选中,.val()方法返回一个数组,这个数组包含每个选中选择项的值;
    在val()中添加参数,即为想要输入的值;
  • $(selector).attr(attribute,value);
    attribute参数为必填,代表了想要定位的属性,而value参数选填,未填为查找,填写后代表修改为 将属性值改为valu。e
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • jQuery 能做什么? jQuery是一个轻量级的javascript库,可以少写代码,做更多的事。1.jQue...
    小囧兔阅读 374评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,159评论 0 1
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,634评论 18 503
  • 时值寒冬,郊外是一片荒岭。这山上也没有梅花,自然也不会有踏雪寻梅的风雅。风瑟瑟地吹着,直刺心骨;湖面都结了...
    寒江三月阅读 206评论 0 0