jQuery选择器_Dom操作_样式_事件处理_动画
2017-07-26 本文已影响0人
山门龙龙
1. jQuery 能做什么？
jQuery是javascript的一个封装的库，它能让我们方便的选择和操作页面中的DOM元素，样式，事件处理，动画，AJAX。
2. jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- jQuery对象是对原生DOM对象封装后的对象，他的类型是一个函数。
- 1.jQuery对象转化为DOM对象 $(' li ')[0] === document.querySelector(' li ');
2.DOM对象转化为jQuery对象 $(document.querySelector(' li ')) === $(' li ');
3.jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- 跟原生JS类似，不过更加方便，例如：$(' li ').on(' click ' , data , function(){})
- bind是老版本的jQuery的事件绑定，unbind取消绑定，delegate老版本的事件代理，live已经被取消使用了，on是现在jQuery所使用的绑定事件，off是解除绑定事件。
- 推荐使用最新的on , off来绑定和解绑事件。
- 代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中国冲击4金 博尔特再战</li>
<li>男双力争会师决赛 </li>
<li>女排将死磕巴西！</li>
</ul>
<button class="change">换一组</button>
</div>
<script>
$('ul').on('click','li',function () {
console.log($(this).text());
})
</script>
</body>
</html>
4.jQuery 如何展示/隐藏元素？
time是执行时间，callback是执行属性操作之后执行的函数。
show(time,callback)展示元素
hide(time,callback)隐藏元素
toggle(time,callback)展示/隐藏元素
fadeIn(time,callback)淡入
fadeOut(time,callback)谈出
fadeToggle(time,callback)淡入/淡出
slideUp(time,callback)滑出
slideDown(time,callback)滑入
slideToggle(time,callback)滑入/滑出
5. jQuery 动画如何使用？
可以使用.animate( properties [, duration ] [, easing ] [, complete ] )
properties是需要变化的属性。duration持续时间。easing动画过程的快慢，先快后慢，先慢后快，还有其它的过程，具体请查看jQuery文档，complete动画完成之后执行的函数。
由于jQuery里面都是链式调用，所以我们可以使用如下的形式：
$('div').animate()
.animate()
.animate()
动画会依次执行，另外还有两个比较常用的方法， .stop( [queue ] [, clearQueue ] [, jumpToEnd ] )和 .finish( [queue ] )
finish可以使动画在执行过程中，直接完成，而不再去完成剩下的动画效果。
stop可以暂停动画的执行，再次点击可以继续上次的动画效果继续执行。
6.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
可以使用html()和text()，代码如下：
<body>
<div class="container">
<ul class="news">
<li>第11日前瞻：中国冲击4金 博尔特再战</li>
<li>男双力争会师决赛 </li>
<li>女排将死磕巴西！</li>
</ul>
<button class="change">换一组</button>
<button class="change2">再换一组</button>
</div>
<script>
$('.change').on('click',function () {
$('ul').html('<a>123</a>');
})
$('.change2').on('click',function () {
$('a').text('456');
})
</script>
</body>
7.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>news</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<input type="text">
<button id="value">获取表单value值</button>
<button id="modValue">修改表单value值</button>
<div id="ipt">
<label for="val1">按钮1</label>
<input type="radio" name="radio" id="val1">
<label for="val2">按钮2</label>
<input type="radio" name="radio" id="val2">
<label for="val3">按钮3</label>
<input type="radio" name="radio" id="val3">
</div>
<button id="iptLab">获取被选中的表单</button>
<button id="iptDef">设置表单第三项为默认被选项</button>
<input type="text" placeholder="元素的属性" id="ipt2">
<button id="iptPh">获取和设置元素的属性</button>
<script>
$('#value').on('click',function () {
var iptVal = $('input').val(); //获取input的value值
console.log(iptVal)
})
$('#modValue').on('click',function () {
var modVal = $('input').val('我是修改后的value值'); //设置input的value值
console.log(modVal.val());
})
$('#iptLab').on('click',function () {
var iptId = $('#ipt input:checked').attr('id');
var iptLab = $('#ipt label[for='+iptId+']').text(); //获取input选择的值
console.log(iptId);
console.log(iptLab);
})
$('#iptDef').on('click',function () {
$('#val3').prop('checked','checked'); //设置默认的input选项
})
$('#iptPh').on('click',function () {
$('#ipt2').attr('placeholder','设置后的元素的属性'); //获取和设置元素的属性
})
</script>
</body>
</html>
