1:什么是jQuery
jQuery是一个简化js的代码框架,用简单的语法代替复杂的js核心操作(DOM、文本、css属性、html)
2:作用
1:实用简洁的语法代替复杂的js语法
2:很多前段框架使用了jQuery
www.jq22.com
3:jQuery入门
1:导入jQuery 的js文件
2:原生对象:没有jQuery的对象的所有js 对象都是原生对象
/
var ip1 = document.getElementById(“ip1”);
alert(ip1.value);
//jQuery获取
var $ip = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ip2"); aler…ip.val());
//把原生对象转化为jq对象
var $ipp =
(
i
p
1
)
;
a
l
e
r
t
(
(ip1); alert(
(ip1);alert(ipp.val());/
//当页面加载完毕后 获取值
/window.onload = function (ev) {
alert(KaTeX parse error: Expected 'EOF', got '}' at position 21: …").val()); }̲; //() 相当于window.onload
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((".ip").val()+"$()");
});/
///点击事件
$(function () {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲ip").click(func…(this).val()+“jq”);
});
});
//给div谢一句话
$("#ip").click(function () {
$("#dd").html(“梦且放在沙滩”)
})
//添加内容
$("#ip").click(function () {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").text("hhhh…("#ip").click(function () {//选中按钮,再选中div 对div做操作
/!KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").hide();*!/…("#dd").show();!///显示
/!KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").toggle();*…("#dd").fadeIn(3000,function () {
alert(“红色”)
});!/
//淡出
/!KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd").fadeOut(20…("#dd").fadeToggle(2000,function () {
alert(“dddd”);
})!/
})/
//事件冒泡和事件捕获
//外div
/*
点击子触发子 然后引发父标签
点击父 触发父 不会引发子
*/
var p = document.getElementById(“p”);
var c = document.getElementById(“c”);
//监听
p.addEventListener(“click”,function (ev) {
alert(“父ppppp”);
});
c.addEventListener(“click”,function (ev) {
alert(“子cccc”);
})
4:命名规则
为了在代码中更好的区分原生对象和jq对象,我们定义了一个约定每一个jq对象前面加一个
$符号,原生对象前面不能添加$
5:原生对象和jq对象的相互转换
原生----》jq
var $命名 = $(愿生);
jq----->原生
var 命名 = $jq对象.get(0);
6:onload写法
js:window.load = function(){}//一个页面只能执行最后一个
jq:$(function(){})//每个够可以执行
7:事件
jq对象.事件(function(){
事件代码块
}) //事件名和js的事件一样 只是把js事件的on去掉就行
8:效果
...了解就可以
9:选择器
jq选择器参考了css的选择器
语法:$("选择器名");
分类:
1:基本选择器
2:层次选择器
3:位置选择器
4:属性关系选择器
10:对css和HTML的操作
HTML属性
获取:
var 属性名 = 原始对象名.属性名
原始属性对象.getAttribute("属性名","属性值");
jq操作
prop()
获取
var value = $(选择).prop(属性名)
设置:
$(选择器).prop("属性名","属性值");
移除:
removeProp("名");
添加:addClass();
removeClass(名);
css属性:
<p style = "width = 200px"></p>
//获取
jq对象.css("width");
//设置
jq对象.css("属性名",'属性值');
11:jquery修改元素的文本内容
获取文本内容:
var 获取 = $jQuery对象.text();
.html();
设置文本内容:
$jquery对象.text(“新的文本内容”);
.html();
12.jquery的元素标签的添加-删除-替换
添加标签
内部添加!
父标签 . append (“《标签》” / $(选择器)) 向父标签的内部的后面追加一个子标签!
例如: div.append(p)
<div>xxx <p>
父标签.preppend (“《标签》” / $(选择器)) 向父标签的内部的前面追加一个子标签!
例如:
div.preppend("p");
<div><p>xxxxx
外部追加:
兄弟标签.after(兄弟标签); 标签后的后面追加一个标签!
兄弟标签.before(兄弟标签); 标签后的前面追加一个标签!
HTML 代码:
<p>I would like to say: </p>jQuery 代码:
$("p").after("<b>Hello</b>");结果:
<p>I would like to say: </p><b>Hello</b>
13.jquery里面的遍历操作
for(index in [] / property in object / var i = 1 ; i<10 ; i++)
$.each(数组,function(){
});
$.each(arrs,function(index,item){
//index 每次遍历的下角标
//item 每次遍历的数组内容
});
14.jquery的ajax使用以及异步上传文件! ******
原生的ajax 4步!
1:创建 xmlhttpRequest 对象
var ajax = new XMLHttpRequest();
2:请求参数
ajax.open("get","url",true);
3:回调函数
ajax.onreadystate = function(){
//获取内容
var result = ....
}
4:发送请求
ajax.send();
Ajax方式:
$.get();
$.post();
$.getJson();
$.load();
--------------------------
$.ajax({settings 特殊的可以和value设置请求的相关参数});
例如: 我想向百度发起一个get请求 传递 name=二狗子 和 age 等于11
$.ajax({
url:"http://www.baidu.com",
type:"get",
data:"name=二狗子&age=11",
success:function(data,status){
//请求成功的时候
},
error:function(execption){
//请求报错的时候!
}
});
情况1: 上传普通的数据!
$.ajax({
url:"http://www.baidu.com",
type:"get",
data:"name=二狗子&age=11",
success:function(data,status){
//请求成功的时候
},
error:function(execption){
//请求报错的时候!
}
});
情况2:异步上传一个form
$.ajax({
url:"http://www.baidu.com",
type:"get",
data:#(form表单)..serialize(),
success:function(data,status){
//请求成功的时候
},
error:function(execption){
//请求报错的时候!
}
});
.serialize() 将form表单的数据! 改变可以提交的参数形式
name=value&name=value
情况3:
异步上传文件!
不同点:
1.借助FormData
2.额外添加两个属性,把请求变成多部件上传! contentType:false / processData:false
var fd = new FormData();
fd.append(key,value);
fd.append(key,文件 原生input对象.files[0]);
$.ajax({
url:"http://www.baidu.com",
type:"get",
data: formdata对象,
contentType:false,
processData:falase,
success:function(data,status){
//请求成功的时候
},
error:function(execption){
//请求报错的时候!
}
});