1.什么是JQuery
jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。
2.jQuery 库中的 $符号是什么？
$符号是一个对象，代表JQuery对象。
3.JQuery有几种选择器
-
基本选择器。
$(“.intro”) 选取所有 class=“intro” 的<p> 元素。$(“#dem”) 选取所有 id="demo" 的 <p> 元素。
-
属性选择器。
$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
-
层级选择器。
$(" div >input")选择div下的所有input。 -
过滤选择器。
$(".main li:odd")匹配所有索引值为奇数的元素。 -
表单选择器。
$(" #main :input")匹配#main下的所有input。
4.$(document).ready() 是个什么函数？
ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载，开始执行JS，好处是使用所有浏览器。
5.window.onload 事件和 jQuery ready 函数有何不同？
window.onload事件需要等待DOM完全加载以及静态资源图片css样式完全加载才会执行js。
jQuery ready() 函数当DOM加载完成就开始执行，不等待静态资源的加载。
$(document).ready(function(){
.......
})
window.onload=function(){
.......
}
6.JQuery对象和原生js互转。
原生js转换JQuery将DOM包含在$()里面就可以。
JQuery转换原生js对象$(''"').get(0).
$(dom)
$(".name").get(0)
7.JQuery中attr和prop的区别
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
8.JQuery基本选择器
$('.list li:first').css('color','red');//选择li的第一个元素。
$('.list li:last').css('color','blue');//选择li元素组合最后一个。
$('.list li:even').css('fontSize','28px');//选择li的奇数元素。
$('.list li:odd').css('fontSize','12px');//选择li的偶数元素。
$('.list li').eq(1).css('color','pink');//选择li中索引为1的元素，索引从0开始。
$('.list li:gt(1)').css('fontWeight','700');//选择li元素组合中索引值大于1的元素。
$('.list li:lt(1)').css('fontWeight','700');//匹配所有小于给定索引值的元素。
$(":header").css("backgroundColor",'green')//选择所有的标题元素h1-h6。
$(":root").css("background-color","#ccc");//选择该文档的根元素（永远都是html标签）。
9.jQuery内容选择器
- ：contains（“给定文字内容”），匹配标签内包含给定文本的元素。
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
$(".list li:contains('3')")//选择li标签内容是3的元素。
- ：empty匹配所有不包含子元素或者文本的空元素
<li></li>
$("li:empty")
10.属性选择器
属性选择器有等于=,不等于！=，^=以给定字符串开始的，$=以给定字符串结尾的，*=包含给定字符串的，
$(".list li[class='der']").css("color",'yellow')//选择class等于der的li。
$(".list li[class!='der']").css("color",'yellow')
$(".list li[class^='der']").css("color",'yellow')
$(".list li[class$='der']").css("color",'yellow')
$(".list li[class*='der']").css("color",'yellow')
11.表单选择器
表单选择器选择所有的input和type值为text ,password,file,button,checkbox,radio等。
$(".list :text").css("border",'none')//选择type等于text元素。
$(".list :input").css("border",'none')//选择list下所有的input。
表单常用属性:enabled，：disabled，：checked，：selecked
$(':disabled').css("border","none")//选择所有被禁用的元素。
$(':checked').css("border","none")//选择所有选中的元素（单选框，复选框，下拉框）。
$(':selecked').css("border","none")//选择select下拉框中所有选中的option元素。
$(':enabled').css("border","none")//选择所有没有没禁用的元素。
12.JQuery节点操作
1. 创建标签
$("<a href=''></a>")//括号里是标签，可以填写标签属性。
2.内部插入父子级别插入
- 末尾插入标签
append()
var res=$("<a href=''></a>")
res.html('ddd')
$('.main').append(res)//末尾插入
- 插入到
appendTo
$('.main').appendTo($('.list'))//将main插入到list里面。list不能为main的子元素。同级可以插入，
- 开头插入标签
prepend
var res=$("<a href=''></a>")
res.html('ddd')
$('.main').prepend(res)
- 把所有匹配的元素前置到另一个、指定的元素元素集合中
prependTo。
$("p").prependTo("#foo");
3.外部插入是同级元素的插入
-
after后面插入和insertBefore效果一样，before前面插入和insertArter效果一样。
var res=$("<a>123</a>")
$("p").after(res)
4.节点的替换
- replaceWith（content/fun）参数可以是字符内容，也可以是函数(函数返回值必须是字符串。)。将匹配的节点替换成指定的元素。前面的替换成后面的。
$('input:disabled').replaceWith('4444');
$('input:disabled').replaceWith("<a>ggggg</a>")
$('.main').replaceWith(function(){
return "<i>ffff</i>"
})
- replaceAll（param）只有一个参数被替换的元素，后面的替换成前面的。
$('<a>ggggg</a>').replaceAll($('.main'))
5.节点删除
- empty（）删除匹配的元素集合中所有的子节点。
$('.main').empty();//删除main中所有的子节点。
- remove（param），detach（param）只有一个参数是需要匹配带有指定类名和id名的字符串，可以不传，删除所有匹配到的元素。remove和detach功能一样，区别是remove会移除绑定的事件，detach不会。
$('input').remove();//删除所有的input。
$('input').remove('#ddd');//删除所有id为ddd的input
$('input').detach();//删除所有的input。
$('input').detach('#ddd');//删除所有id为ddd的input
6.节点克隆
- clone（param）一个参数为布尔值，true绑定的事件也会克隆，false不会，默认false。
var res=$("div").clone(true);
$('.main').after(res)
13.事件的绑定和解绑
- 绑定事件通过on绑定事件，有两个参数，第一个参数是事件名，第二个参数是回调函数。
$(".main").on('click',function(){
})
- 移除事件off() 方法移除用on()绑定的事件处理程序。还可以使用unbind（JQuery3.0移除）；
不加事件名，默认移除所有绑定的事件。
$("p").off()
$("p").unbind()
14.JQuery网络请求
jQuery发请求可以使用$.get(),$.post(), $.ajax()(功能最齐全完善)。一般使用的都是$.ajax()。
$.ajax({
timeout：3000，//请求延迟时间。
async：true，//默认为true异步请求true为同步。
type: "POST", //规定哪种请求方式
url: "/login", //请求路径
contentType: 'application/x-www-form-urlencoded;charset=utf-8', //请求头
data: {username:$("#username").val(), password:$("#password").val()}, //参数
dataType: "json", //传输的数据类型
success: function(data){ //请求成功的回调
console.log(data);
}，
error:function(e){ //请求失败的回调
console.log(e);
},
statusCode: {404: function() {//响应的状态码回调
alert('page not found');
}
});
15.查找元素
- 查找父元素parent（）取得一个包含着所有匹配元素的唯一父元素的元素集合。返回的数据包含子元素。
$("p").parent()
- 查找所有的父元素parents（），取得一个包含着所有匹配元素的祖先元素的元素集合（不包含子元素）
$("span").parents("p")//查找父元素集合中所有p的元素集合
- 查找子元素children（）
$("div").children()
- 查找当前元素相邻的后面同级元素集合next（）一个
$("p").next()
- 查找当前元素相邻的后面同级元素集合nextAll（）后面所有同级元素
$("p").nextAll()
- 查找当前元素相邻的前面同级元素集合prev（）前面一个同级元素
$("p").prev()
- 查找当前元素相邻的前面同级元素集合prevAll（）前面所有同级元素
$("p").prevAll()
- 查找指定元素find（）搜索所有与指定表达式匹配的元素.
$("p").find("span")
网友评论