26.jQuery part1
2017-06-17 本文已影响0人
guidetheorient
1. jQuery 能做什么？
- 获取页面元素
- 修改页面的样式
- 修改页面元素的内容
- 响应用户的页面操作
- 为页面添加动态效果
- 统一的Ajax操作
- 简化了常见的js方法
2. jQuery 对象和 DOM 原生对象有什么区别？如何转化？
区别：
- jQuery对象是通过通过jQuery包装DOM对象后产生的对象。
- jQuery对象不能使用DOM对象的任何方法，如
$('#id').innerHTML是错误的，可以用$('#id').html()代替
- jQuery对象不能使用DOM对象的任何方法，如
- DOM对象是通过原生js中的
getElementById,querySelector等方法返回的DOM元素- DOM对象也不能使用jQuery的方法
转化：
- jQuery对象转换为DOM对象：通过
[index]和get(index)
var $obj = $('#id') //jQuery对象
var obj = $obj[0] //DOM对象，或者var obj = $obj.get(0)
- DOM对象转换为jQuery对象：用
$()将DOM对象包装起来
var obj = document.getElementById('id') //DOM对象
var $obj = $(obj) //jQuery对象
3.jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
1.通过.on(events [,selector] [,data] ,handler(eventObject))绑定；其中
events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin" 或者 ".myPlugin"
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
-
.bind()3.0版本弃用
为每一个匹配元素的特定事件（如click）绑定一个事件处理函数 -
.unbind()3.0版本弃用
bind方法的反向操作，从每一个匹配元素删除绑定的事件 -
.delegate()3.0版本弃用
为所有匹配选择器的元素绑定事件处理函数，元素可以是现在或将来的元素 -
live()1.7版本弃用
附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。 -
.on()推荐使用
提供了绑定事件处理的所有功能
为所有匹配的元素绑定事件处理函数 -
.off()推荐使用
移除用.on()绑定的事件处理程序
3..on()绑定事件使用事件代理
//第二个参数为子元素的选择器，在$('ul')触发click事件后，会检查target是否为li元素，
//true的话再调用事件处理函数
$('ul').on('click', 'li', function (e){
console.log(e.target);
});
4.jQuery 如何展示/隐藏元素？
-
.show()显示选中元素 -
.hide()隐藏选中元素，hide()方法会记住元素显示时的display值，当调用.show()时根据原来的值显示元素 -
.toggle()切换元素可见状态 -
.fadeIn()通过淡入的方式显示选中元素 -
.fadeOut()通过淡出的方式隐藏选中元素，一旦透明度为0，元素的display设置为none -
.fadeToggle()通过匹配的元素的不透明度动画，来显示或隐藏它们，一旦透明度为0，元素的display设置为none -
slideUp()用滑动动画隐藏匹配元素 -
slideDown()用滑动动画显示匹配元素 -
slideToggle()用滑动动画切换匹配元素显示状态
以上参数都可以有[duration] [,easing] [,complete]三个参数，其中
duration：动画持续多久，为数字或normal,slow,fast或自定义
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
-
.css('display', 'none')//或者inline-block,block……
5.jQuery 动画如何使用？
-
$(selector).animate(styles[,speed][,easing][,callback])-
styles规定产生动画效果的CSS样式和值，其中CSS样式使用驼峰形式的DOM名称如fontSize代替font-size -
speed规定动画的速度，数值或normal,slow,fast -
easing规定在不同的动画点中设置动画速度的 easing 函数，内置swing,linear,可使用扩展插件
-
-
callback规定动画执行完成后执行的函数 -
$(selector).animate(styles,options)-
styles同上 -
options额外的动画效果- speed - 设置动画的速度
- easing - 规定要使用的 easing 函数
- callback - 规定动画完成之后要执行的函数
- step - 规定动画的每一步完成之后要执行的函数
- queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
- specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
-
使用介绍
- 简单动画
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script src="./jquery-3.2.0.js"></script>
<style>
.hunger{
height: 200px;
width: 200px;
background: lightblue;
position: relative;
}
</style>
</head>
<body>
<div class="hunger"></div>
<script>
//动画
$('.hunger').click(function(){
$(this).animate({
left:'50px',top:'50px'
},1000)
})
</script>
</body>
简单动画
- 累加、累减动画
将left:'50px',top:'50px'改为left:'+=50px',点击一次，右移15px
累加、累减动画
- 顺序执行多个动画
- 可以在链式调用animate()或者回调的方式实现顺序动画
- 也可以用遍历，将js部分改为以下，点击元素依次执行array里面的动画
//动画参数
var array = [
{left:'50px',top:'50px'},
{left:'0'},
{top:'0'},
{width:'50px',height:'50px'}
]
//依次执行
$('.hunger').click(function(){
array.forEach(function(ele){
$('.hunger').animate(ele,1000)
})
})
顺序执行动画
6.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
$(selector).html()获取元素内部HTML内容
$(selector).html(string)通过传入string设置元素内部HTML内容
<div class="hunger">
<p>12</p>
</div>
<script>
console.log($('.hunger').html()) //<p>12</p>
$('.hunger').html('<div>123</div>')
console.log($('.hunger').html()) //<div>123</div>
</script>
$(selector).text()获取元素内部文本内容
$(selector).text(string)通过传入string设置文本内容
<div class="hunger">
<p>12</p>
</div>
<script>
console.log($('.hunger').text()) //12
$('.hunger').text('1234')
console.log($('.hunger')[0]) //<div class="hunger">1234</div>
console.log($('.hunger').text()) //1234
</script>
7.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$(selector).val() //获取表单内容
$(selector).val(value) //通过传入value设置表单内容
$(selector).attr(attributeName) //获取元素属性
$(selector).attr(attributeName,value) //通过传入value设置属性值
8.
9.
10.
11.
`
