jQuery选择器_Dom操作_样式_事件处理_动画

1. jquery 能做什么?

jquery是一个js工具类库,封装了常用的DOM操作方法,有更好的兼容性,利用jquery提供的api,可以完成以下工作:

  • 完成DOM的增删改查等操作
  • 事件绑定操作
  • 样式修改
  • 方便的动画设置
  • ajax操作
  • 多种第三方插件可以使用

2. Jquery对象和DOM原生对象的区别,转换

区别:

  1. jquery对象是使用jquer方法获取的对象,可以调用jquery方法,jquery对象是一个类数组对象

  2. DOM原生对象是使用原生js方法获取的对象,是文档对象模型,只能调用原生的js方法

转换方式:

  1. jquery对象转DOM原生对象:通过下标方式选择jquery对象,如:$('div')[0]

  2. DOM原生对象转jQuery对象:调用jquery方法,如:$(document.querySelector('div'))


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

jquery提供了四种事件监听的方式,分别为bind、delegate、live和on

  • bind

      bind(type,[data],function(eventObject))
    

    在选择的元素上绑定特定事件类型的监听函数,其中data为可选参数

//定位找出所有的div元素给其添加click事件的函数
  $('div').bind('click',function(){
     console.log(this)
  })
  • unbind

    unbind(type,[data|fn]])
    

bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
如果没有参数,则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数,则只删除该类型的绑定事件。除指定类型的事件

//把所有段落的所有事件取消绑定
$("p").unbind()

//将段落的click事件取消绑定
$("p").unbind( "click" )
  • delegate

    delegate(selector,type,[data],fn)
    

指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

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

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
  • live

    live(type, [data], fn)

jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说:

<body>
  <div class="clickme">Click here</div>
</body>

//可以给这个元素绑定一个简单的click事件:
$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

//有另一个元素添加进来了
$('body').append('<div class="clickme">Another target</div>');

//尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
//.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
 //然后再点击新增的元素,他依然能够触发事件处理函数。

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

  • on

    on(type,[selector],[data],fn)
    

在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live().

  //给p绑定click事件处理方法
  $("p").on("click", function(){
    alert( $(this).text() );
  });
  • off

    off(events,[selector],[fn])
    

在选择元素上移除一个或多个事件的事件处理函数。

//删除所有p的绑定事件
$("p").off()

//删除所有p的代理事件
$("p").off( "click", "**" )

var foo = function () {
  // code to handle some kind of event
};

// body代理所有p的点击事件,p点击时,会执行foo方法
$("body").on("click", "p", foo);


// 解除body代理的p点击事件
$("body").off("click", "p", foo); 

推荐使用
推荐使用on方法

在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live().

on绑定事件使用事件代理写法:

//只需为tbody绑定点击事件处理方法,
//在tr发生点击事件后,会通过冒泡传递给tbody,然后调用处理方法
$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

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

.show([speed],[callback])       //显示元素
.hide([speed],[callback])       //隐藏元素
.fadeIn([speed], [callback]      //淡入显示隐藏元素
.fadeOut([speed], [callback]):  //淡出隐藏显示元素
.slideUp([speed],[callback])     //以滑动的方式隐藏显示元素
.slideDown([speed],[callback])     //以滑动的方式隐藏显示元素

.toggle([speed], [callback])        //显示隐藏元素,隐藏显示元素
fade.toggle([speed], [callback])    //淡入淡出显示隐藏元素,隐藏显示元素

- speed:  规定速度,取值:'slow', 'normal', 'fast'或毫秒
- callback:显示或隐藏后执行的函数

5. jquery 动画如何使用?

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

//例子:
<body>
  <p style="border:1px solid red";>nihao</p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var $p=$("p")
    $p.on('click',function(){
      $p.animate({
        height:'100px'
      },1000)
    })
  </script>
</body>

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

  • $().html()获取html内容

  • $().text()获取文本内容

      $('div').html()           //无参数,用于返回元素的innerHTML
      $('div').html(string)       //有参数,设置元素为内部HTML内容
    
      $('div').text()           //无参数,用于返回元素的innerText
      $('div').text(string)       //有参数,设置元素的内部文本
    

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

.val([string])
无参数时,获取表单用户的输入值
有参数时,设置表单的输入值

.attr('attrName')
获取元素特定属性的值
.attr('attrName','attrVal')     //传递两个参数,即属性名称和对应的值
设置单个的属性值

8. 边栏菜单

http://js.jirengu.com/rayoj/3/edit

image.png

9. tab页切换

http://js.jirengu.com/kimoj/3/edit

image.png

10. 添加元素

http://js.jirengu.com/lobih/10/edit

image.png

11. tab页滑动切换

http://js.jirengu.com/pusup

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容