jQuery简单介绍
2017-10-27 本文已影响0人
饥人谷_Jack
题目1： jQuery 能做什么？
- 选择网页元素
- 改变结果集
- 元素的操作：取值和赋值
- 元素的操作：移动
- 元素的操作：复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
- http://www.jq22.com/jquery-info122
- http://www.css88.com/jqapi-1.9/
- http://devdocs.io/jquery/
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- DOM原生对象：
- 是对象；
- 拥有原生对象的属性和方法；
- jQuery对象：
- 是DOM元升级对象经过包装之后，拥有jQuery的属性和方法（对原生DOM对象的封装）；
- 是类数组；
$('body')[0]//可以转为DOM原生对象
$(document.querySelector('body))//可以转为jQuery对象
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
-
bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。jQuery 3.0中已弃用此方法，请用 on()代替。
$("p").bind("click", function(){
alert( $(this).text() );
});
-
unbind(type,[data|fn]])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
jQuery 3.0中已弃用此方法，请用 off()代替。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
-
delegate(selector,[type],[data],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
jQuery 3.0中已弃用此方法，请用 on()代替。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
-
live(type, [data], fn)
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
从 jQuery 1.7 开始，不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户，应该优先使用 .delegate() 来替代 .live()。
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
-
on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
-
off(events,[selector],[fn])
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。有关详细信息，请参阅该网页上delegated和directly绑定事件。特定的事件处理程序可以被移除元素上提供事件的名称，命名空间，选择器，或处理函数名称的组合。当有多个过滤参数，所提供的参数都必须匹配的事件处理程序被删除。
var validate = function () {
// code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
// remove event handlers in the ".validator" namespace
$("form").off(".validator");
推荐使用.on()、.off()
$('ul').on('click','li',function(){
console.log()this
})
题目4：jQuery 如何展示/隐藏元素？题目5： jQuery 动画如何使用？
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
ul>li {
list-style: none;
border: 1px solid;
}
p {
display: none;
}
</style>
<div class="box"></div>
<ul>
<li>
<h1>我是标题1</h1>
<p>我是段落1</p>
</li>
<li>
<h1>我是标题2</h1>
<p>我是段落2</p>
</li>
<li>
<h1>我是标题3</h1>
<p>我是段落3</p>
</li>
</ul>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="more">多个动画</button>
<button id="finish">完成</button>
<button id="stop">停止</button>
<script>
var $box = $('.box')
$('#show').on('click', function () {
$box.show(1000, function () {
$(this).text('animation is done')
})
})
$('#hide').on('click', function () {
$box.hide(1000)
})
$('ul').on('click','li',function () {
$(this).find('p').toggle(1000)//动态效果为从右至左。横向动作。
$(this).find('p').slideToggle(1000)//动态效果为从下至上。竖向动作。
$(this).find('p').slideUp(1000)//通过高度变化（向上减小）来动态地隐藏示所有匹配的元素
$(this).siblings().find('p').slideDown(1000)//通过高度变化（向下增大）来动态地显示所有匹配的元素
$(this).find('p').fadeIn(1000)//通过不透明度的变化来实现所有匹配元素的淡入效果
$(this).find('p').fadeOut(1000)//通过不透明度的变化来实现所有匹配元素的淡出效果
$(this).find('p').fadeToggle(1000)//通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
$(this).find('p').fadeTo(1000,0.36)//把所有匹配元素的不透明度从0以渐进方式调整到指定的不透明度
})
$('#more').on('click',function(){
$box.animate({width:'140px',height:'140px',left:'300px'},1000)
$box.animate({top:'300px'},1000).animate({left:'0'}).animate({top:'0',width:'100px',height:'100px'})
})
$('#finish').on('click',function(){
$box.finish()
})
$('#stop').on('click',function(){
$box.stop(true)
})
</script>
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
<ul>
<li id="li01">
<h1>我是标题1</h1>
<p>我是段落1</p>
</li>
<li id="li02">
<h1>我是标题2</h1>
<p>我是段落2</p>
</li>
<li id="li03">
<h1>我是标题3</h1>
<p>我是段落3</p>
</li>
</ul>
<script>
console.log($('ul').html())//获取HTML内容
$('ul #li01').html('<div>hello jirengu</div>')//设置HTML内容
console.log($('ul #li02').text())//获取文本内容
$('ul #li02').text('hello world')//设置文本内容
</script>
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
console.log($("#username").val())//获取input的值
$("#username").val('jirengu')//设置input的值
console.log($("#username").attr('type'))//获取input的type属性
$("#username").attr('type', 'password')//设置input的type属性值为'password
$('#city').change(function () {
console.log($(this).val())//获取select选择时的value
})
