jQuery初识
2017-09-16 本文已影响32人
YM雨蒙
jQuery 能做什么？
jQuery是一款快速而简洁的javascript的库,核心是构建与css选择器上,用来操作DOM元素,通过链式调用,兼容性好,API 友好,功能强大，与时俱进
- 选择网页元素
- 改变结果集
- 元素的操作：取值和赋值
- 元素的操作：移动
- 元素的操作：复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- 对于jQuery对象只能使用jQuery对象的API
- 对于原生对象只能使用原生对象的 API
如何转化?
- 对于原生转化为jQuery,只需在外面加上一层
$符号
$(document.querySelector("#box"))
就可以变为jQuery对象,就可以使用jQuery对象的API了
- 对于jQuery对象转换为原生对象,只需要加个
[下标]
$("#box .box")[0]
,就可以使用j原生对象的API了
问题是:那我们又不想变成原生对象,又想取值怎么办呢?
$("#box .box").eq(0) //.eq(index)
jQuery DOM操作,如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
<div class="container">
<ul class="wrap">
<li>1</li>
<li class = "active">2</li>
<li>3</li>
</ul>
</div>
//创建元素
$("<div class="box"><h1>创建html元素</h1></div>")
//添加元素append
var $li = $("<li>4</li>")
$(".wrap").append($li) //添加到元素的后面
$li.appendTo($(".container .wrap")) //把对象插入到目标元素尾部
var $li1 = $("<li>0</li>")
$(".wrap").prepend($li1) // 向对象头部追加内容，用法和append类似，内容添加到最开始
$li.before($li1) //翻译就是:4的前面是0
$li.before($("<li>5</li>")) //翻译:4的前面新建了5
$li.after($li1) //翻译就是:4的后面是0
$li.after($("<li>5</li>")) //翻译:4的后面新建了5
//删除元素.remove()
$(".wrap li").eq(3).remove() //删除第三个li
$(".wrap").empty() //清空ul下所有的li .empty()清空被选择元素内所有子元素
// $(selector).html()用于获取/修改元素的innerHTML
当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
// $(selector).text()设置文本内容
jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
//html demo点击在div里显示增加
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text">
<button id="btn">添加</button>
<div class="wrap">
</div>
//jQuery
$(".box>ul>li").on("click",function(){
var str = $(this).text()
$(".wrap").text(str) //text() == innerText
})
$("#btn").on("click",function(){
var value = $("#ipt").val()
$(".box>ul").append('<li>'+value+'</li>') //添加value
})
事件效果
那使用事件代理呢?
//事件代理
$(".box>ul").on("click","li",function(){
var str = $(this).text()
$(".wrap").text(str)
})
$("#btn").on("click",function(){
var value = $("#ipt").val()
$(".box>ul").append('<li>'+value+'</li>')
})
事件代理
-
.trigger( eventType [, extraParameters ] )根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为 -
bind为一个元素绑定一个事件处理程序 ，适用于早期jQuery版本（1.7以前） -
unbind从元素上删除一个以前附加事件处理程序。 -
delegate为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。 -
live附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。 -
on在选定的元素上绑定一个或多个事件处理函数。 -
off移除一个事件处理函数
现在推荐使用on(),off()来绑定/解除事件。
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
// .val() 读写双用的方法，用来处理input的value
<input id="ipt" type="text" value="hello">
$("#ipt").val() //"hello"
$("#ipt").val("hello World") //"hello World"
// .attr(attributeName) 获取元素特定属性的值
$("#ipt").attr("type") //查看属性值 "text"
$("#ipt").attr("type","checkbox") //设置属性 变为了多选框
// .removeAttr() 移除属性
$('div').removeAttr('id') //移除id属性
// .css() 类似于 style
<div class="box"></div>
$(".box").css({"width":"200px", //设置css样式
"backgroundColor":"yellow",
"height":"30px"})
// .addClass()
// .removeClass()
// .hasClass()
// .toggleClass(className) toggle是切换的意思，方法用于切换
// .hasClass(className) 检查元素是否包含某个class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
jQuery属性 如何展示/隐藏元素？ jQuery 动画如何使用？
//展示
.show( [duration ] [, easing ] [, complete ] )
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
//隐藏
.hide([duration ] [,easing ] [,complete ])
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
//切换
.toggle( [duration ] [, easing ] [, complete ] ) 用法同上
// 渐变
.fadeIn( [duration ] [, easing ] [, complete ] )通过淡入的方式显示匹配元素，参数含义和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )通过淡出的方式隐藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
.fadeToggle( [duration ] [, easing ] [, complete ] )
//滑动
.slideDown( [duration ] [, easing ] [, complete ] )用滑动动画显示一
个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
.slideUp( [duration ] [, easing ] [, complete ] )用滑动动画隐藏一个匹配
元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分
滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性
被设置为none，以确保该元素不再影响页面布局。 display 样式属性将
被设置为none，以确保该元素不再影响页面布局。
//自定义
.animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一个CSS属性和值的对象,动画将根据这组对象移动。
.stop( [clearQueue ] [, jumpToEnd ] )
//停止匹配元素当前正在运行的动画。
展示,隐藏
渐变
滑动
动画
练习DEMO
预览地址
