今天是我在乐字节教育学习的第六天,今天主要学习的内容是JQuery。
Jquery对象
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少,做得更多,使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让写出来的代码更加优雅,更加健壮,“如虎添翼”。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery,一切 so easy。" --因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。如今,jQuery已经成为最流行的 javascript 框架,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery。
Jquery的下载与安装
下载
http://jquery.com/ 下载
版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
(1)完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
(2)压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版,减少传输)
目前使用版本:jquery-3.4.1.js
优点
(1)提供了强大的功能函数
(2)解决浏览器兼容性问题
(3)实现丰富的 UI 和插件
(4)纠正错误的脚本知识
…
安装
在页面引入即可
Jquery核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对象,调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。
$ <==> jQuery
Dom对象 与 Jquery包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性,通过js代码获取的对象都是dom对象;而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能使用jQuery提供的方法。
Dom对象
javascript 中获取 Dom 对象,Dom 对象只有有限的属性和方法:
var div = document.getElementById(“testDiv”);
var divs = document.getElementsByTagName(“div”);
Jquery包装集对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲testDiv"); Dom对…()方法进行包装即可
var domDiv = document.getElementById(‘mydiv’); // 获取Dom对象
mydiv = $(domDiv);
Jquery对象 转 Dom对象
jQuery对象转Dom对象,只需要取数组中的元素即可
// 第一种方式 获取jQuery对象
var jqueryDiv = jQuery(’#mydiv’);
// 第二种方式 获取jQuery对象
jqueryDiv = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲mydiv'); var do…()转为jQuery对象
$(’#mydiv’).each(function() {//遍历
var jquery = $(this);
});
案例:
Jquery选择器
和使用js操作Dom一样,获取文档中的节点对象是很频繁的一个操作,在jQuery中提供了简便的方式供我们查找|定位元素,称为jQuery选择器,选择器可以说是最考验一个人 jQuery 功力的地方,通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的,具体分类如下。基础选择器掌握即可 ,其他用到再查阅。
基础选择器
选择器 名称 举例
id选择器 #id $("#testDiv")选择id为testDiv的元素
元素名称选择器 element $(“div”)选择所有div元素
类选择器 .class $(".blue")选择所有class=blue的元素
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素
层次选择器
选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素
密码:
年龄:小屁孩 你懂得
爱好:篮球 爬床 代码
来自: 请选择 北京 上海
简介:
头像:
提交 重置
</form>
</body>
Jquery Dom操作 jQuery也提供了对HTML节点的操作,而且在原生js的基础之上进行了优化,使用起来更加方便。
常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。
操作元素的属性
获取属性
方法 说明 举例
attr(属性名称) 获取指定的属性值,操作 checkbox 时,
选中返回 checked,没有选中返回 undefined。 attr(‘checked’)
attr(‘name’)
prop(属性名称) 获取具有true和false两个属性的属性值 prop(‘checked’)
设置属性
方法 说明 举例
attr(属性名称,属性值) 设置指定的属性值,
操作 checkbox 时,
选中返回 checked,
没有选中返回 undefined。 attr(‘checked’,’checked’)
attr(‘name’,’zs’)
prop(属性名称,属性值) 设置具有true和false的属性值 prop(‘checked’,’true’)
移除属性
方法 说明 举例
removeAttr(属性名) 移除指定的属性 removeAttr(‘checked’)
方法 说明
attr(“class”) 获取class属性的值,即样式名称
attr(“class”,”样式名”) 修改class属性的值,修改样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称
增加元素的具体样式,格式:
1)css({‘样式名’:’样式值’,’样式名2’:’样式值2’})
例:css({“background-color”:“red”,“color”:"#fff"});
2)css(“样式名”,”样式值”)
例:css(‘color’,‘white’)
方法 说明
html() 获取元素的html内容
html(“html,内容”) 设定元素的html内容
text() 获取元素的文本内容,不包含html
text(“text 内容”) 设置元素的文本内容,不包含html
val() 获取元素value值
val(‘值’) 设定元素的value值
$(‘元素内容’);
$(‘
this is a paragraph!!!
’);添加元素
方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
( c o n t e n t ) . a p p e n d T o ( s e l e c t o r ) 把 c o n t e n t 元 素 或 内 容 插 入 s e l e c t o r 元 素 内 , 默 认 是 在 尾 部 b e f o r e ( ) 在 元 素 前 插 入 指 定 的 元 素 或 内 容 : (content).appendTo(selector) 把 content元素或内容插入selector 元素内,默认是在尾部 before() 在元素前插入指定的元素或内容: (content).appendTo(selector)把content元素或内容插入selector元素内,默认是在尾部before()在元素前插入指定的元素或内容:(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
prepend()方法前追加内容
prependTo()方法前追加内容
append()方法后追加内容
appendTo()方法后追加内容
男神 偶像 $(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element是当前的元素,此时是dom元素。
ready()可以写多个,按顺序执行
(document).ready(function(){})等价于(document).ready(function())等价于(function(){})
页面载入时触发ready()事件
aaa
bbbb
ccc
dddd
bind()绑定事件 为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。$(selector).bind( eventType [, eventData], handler(eventObject));
eventType :是一个字符串类型的事件类型,就是你所需要绑定的事件。
这类类型可以包括如下:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]:传递的参数,格式:{名:值,名2:值2}
handler(eventObject):该事件触发执行的函数
简单的bind()事件
bind()方简单的绑定事件
bind()方法绑多个事件
格式:$.ajax({});
参数:
type:请求方式GET/POST
url:请求地址url
async:是否异步,默认是true表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
get请求
$.ajax({
type:“get”,
url:“js/cuisine_area.json”,
async:true,
success : function (msg) {
var str = msg;
console.log(str);
$(‘div’).append("
for(var i=0; i<msg.prices.length;i++){
$(‘ul’).append("
- ");
$(‘li’).eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$(‘div’).html(errMsg.responseText);
}
});
post请求$.ajax({
type:“post”,
data:“name=tom”,
url:“js/cuisine_area.json”,
contentType: “application/x-www-form-urlencoded”,
async:true,
success : function (msg) {
var str = msg;
console.log(str);
$(‘div’).append("
for(var i=0; i<msg.prices.length;i++){
$(‘ul’).append(" - ");
$(‘li’).eq(i).text(msg.prices[i]);
}
},
error : function (errMsg) {
console.log(errMsg);
$(‘div’).html(errMsg.responseText)
}
});
$.get
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。 请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
// 1.请求json文件,忽略返回值
$.get(‘js/cuisine_area.json’);
// 2.请求json文件,传递参数,忽略返回值
$.get(‘js/cuisine_area.json’,{name:“tom”,age:100});
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get(‘js/cuisine_area.json’,function(data){
console.log(data);
});
// 4.请求json文件,传递参数,拿到返回值
$.get(‘js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data);
});
$.post
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。 请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
// 1.请求json文件,忽略返回值
$.post(’…/js/cuisine_area.json’);
// 2.请求json文件,传递参数,忽略返回值
$.post(‘js/cuisine_area.json’,{name:“tom”,age:100});
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post(‘js/cuisine_area.json’,function(data){
console.log(data);
});
// 4.请求json文件,传递参数,拿到返回值
$.post(‘js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data);
});
$.getJSON
表示请求返回的数据类型是JSON格式的ajax请求$.getJSON(‘js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
$.get(‘js/cuisine_area.json’);// 2.请求json文件,传递参数,忽略返回值 $.get('js/cuisine_area.json',{name:"tom",age:100}); // 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.get('js/cuisine_area.json',function(data){ console.log(data); }); // 4.请求json文件,传递参数,拿到返回值 $.get('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); }); $.post 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。 请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 // 1.请求json文件,忽略返回值 $.post('../js/cuisine_area.json'); // 2.请求json文件,传递参数,忽略返回值 $.post('js/cuisine_area.json',{name:"tom",age:100}); // 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.post('js/cuisine_area.json',function(data){ console.log(data); }); // 4.请求json文件,传递参数,拿到返回值 $.post('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); }); $.getJSON 表示请求返回的数据类型是JSON格式的ajax请求 $.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); // 要求返回的数据格式是JSON格式 });