1. Jquery概念
jQuery 是一个 JavaScript 库
jQuery 库包含以下特性：
1. HTML 元素选取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函数
5. JavaScript 特效和动画
6. HTML DOM 遍历和修改
7. AJAX
2. 库和框架的区别
1. 库:库可以看作是一种方法的集合，他不会特定的去解决某些问题，他是将所有的方法整合在一个库中，供使用者使用，Jquery可以看成一个库，它提供了相当多的方法和函数。
2. 框架:框架的含义是一个骨架，它封装了某领域内处理流程的控制逻辑，所以我们经常说框架是一个半成品的应用。由于领域的种类是如此众多，所以框架必须具有针对性，比如，专门用于解决底层通信的框架，或专门用于医疗领域的框架。框架中也包含了很多元素，框架中的所有元素都为了实现一个共同的目标而相互协作
3. jquery 能做什么？
1. HTML 元素选取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函数
5. JavaScript 特效和动画
6. HTML DOM 遍历和修改
7. AJAX
4.jquery 对象和 DOM 原生对象有什么区别？如何转化？
- 区别：
jquery对象是通过jquery选择器选择的对象，得到的是类数组对象，有自己的独有的属性和方法；DOM原生对象是通过JS选择器获得的对象,有自己的属性和方法。二者不能够混用，否则会报错。
1.原生DOM对象：根据W3C DOM规范，DOM是HTML与XML的应用接口（API）。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。DOM对象，即是我们用传统的方法(javascript)获得的对象。
2.jQuery对象：jquery对象其实是一个javascript的数组这个数组对象包含125个方法和4个属性4个属性分别是：
(1)jquery 当前的jquery框架版本号
(2)length 指示该数组对象的元素个数
(3)context 一般情况下都是指向HtmlDocument对象
(4)selector 传递进来的选择器内容 如：#yourId或.yourClass等
- 如何转换：
获取jquery对象：$('#header');
获取DOM对象 ：document.getElementById('header');
jquery转原生DOM对象：$('#header')[0];
DOM对象转jquery:$(DOM对象)；
5.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
jQuery中绑定事件的方法有：bind()，live()，delegate()，on()。
与之对应的移除事件的方法有：unbind()，die()，undeleate()，off()。
其中live()和die()在jQuery1.7中以弃用，bind()、unbind(),delegate()、undeleate()在在jQuery3.0中以弃用。
- bind:bind()是最直接的、存在最久的绑定方法，但它不会绑定到在它执行完后动态添加的那些元素上。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('li').bind('click',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')//新添加的li不会被绑定到上面的点击效果
$('input').bind('click',function(){
$('ul').append($li)
});
</script>
- unblind:用于移除指定元素绑定的事件
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('li').bind('click',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').bind('click',function(){
$('ul').append($li)
});
$('li').unbind();//被移除绑定点击效果
$('input').unbind();//被移除绑定点击效果
</script>
- live:这个方法用到了事件委托的概念来处理事件的绑定,它将事件绑定到了document上，所以在它执行之后添加的元素仍然可以触发绑定事件。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('li').live('click',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')//新添加的li有上面绑定的点击效果
$('input').live('click',function(){
$('ul').append($li)
});
</script>
- delegate:delegate()有点像live(),不同于.live()的地方在于，它不会把事件全部绑定到document,而是由你决定把它放在哪儿(事件代理)。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('ul').delegate('li','click',function(){//事件代理
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').on('click',function(){
$('ul').append($li)
});
</script>
- on:提供了一种统一绑定事件的方法，它替代了.bind(), .live(), .delegate()这三种方法。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('ul').on('click','li',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').on('click',function(){
$('ul').append($li)
});
</script>
- off:提供了一种统一移除绑定事件的方法，它替代了.unbind(), .die(), .undelegate()这三种方法。
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<input type="button" value="添加">
<script>
$('ul').on('click.console','li',function(){
console.log($(this).text())
});
var $li =$('<li>item5</li>')
$('input').on('click.add',function(){
$('ul').append($li)
});
$('ul').off('click.console');//移除绑定点击
$('input').off('click.add');//移除绑定点击
</script>
- 推荐使用on()和off()方法.
6..jquery 如何展示/隐藏元素？
jquery中可以使用hide()和show()的方法进行展示和隐藏元素
如：
<div>
<button id="hide">隐藏</button>
<button id="show">展示</button>
<p>hello world</p>
</div>
<script src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js'></script>
<script>
$('#hide').on('click',function(){
$("p").hide();//隐藏p元素
})
$('#show').on('click',function(){
$('p').show();//展示p元素
})
</script>
7. jquery 动画如何使用？
jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
1.必需的 params 参数定义形成动画的 CSS 属性。
2.可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
3. 可选的 callback 参数是动画完成后所执行的函数名称。
<input type="button" value="开始" id="input">
<input type="button" value="重置" id="input2">
<div id="ct"></div>
<script>
var clock = true;
$('#input').on('click',function(){
if (!clock) {
return;
}
clock = false;
$('#ct').animate({width:'200',height:'200'},2000)
$('#ct').animate({opacity:'0'},2000)
.animate({opacity:'1'},3000)
.animate({top:'0',left:'50%'},2000)
$('#ct').animate({top:'0',left:'0'},3000)
$('#ct').animate({width:'100',height:'100'},2000,function(){
clock =true;
})
});
$('#input2').on('click',function(){
$('#ct').finish();//结束所以动画返回css样式
})
</script>
8. 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容（包括 HTML 标记）
- 获取：
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<script>
console.log( $('#test').html() ); // 这是段落中的<b>粗体</b>文本。
console.log( $('#test').text() ); // 这是段落中的粗体文本
</script>
- 设置：
console.log( $('#test').html('<span>hello</span>' )); //
这是段落中的<b>粗体</b>文本。被替换成hello
console.log( $('#test').text('<span>hello</span>' )); //
这是段落中的<b>粗体</b>文本。<span>hello</span>
9. 如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
val() 设置或返回表单字段的值
attr() 设置或返回元素的属性
- 获取：
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<input id="test-input" type="text" placeholder="测试表单val">
<a id="test-a" href="http://www.jirengu.com">这是链接</a>
<script>
console.log( $('#test-input').val() );
console.log( $('#test-a').attr('href') );
console.log( $('#test-img').attr('data-src') );
</script>
- 设置：
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<input id="test-input" type="text" placeholder="测试表单val">
<a id="test-a" href="http://www.jirengu.com">这是链接</a>
<script>
$('#test-input').val('输入xxx') ;
$('#test-a').attr('href','http://www.baidu.com') ;
$('#test-img').attr('src', $('#test-img').attr('data-src')) ;
</script>
网友评论