JQ
<head>
<meta charset="UTF-8">
<title>jquery2</title>
<style>
.redDiv{
width: 100px;
height: 100px;
background-color: red;
display: block;
/*不透明度 0 - 1 1 代表完全不透明*/
/*opacity: 0.6;*/
/*可见性 visible 可见的
hidden 隐藏
*/
/*visibility: visible;*/
}
</style>
</head>
<body>
<div class="redDiv"></div>
<input type="button" value="显示">
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(":button").click(function(){
$(".redDiv").slideUp(1000);
});
$("div").click(function(){
})
// 元素可以直接绑定某个事件(必须是JQ支持的)
$("div").reset(function(){
})
// 对于不能直接绑定的使用on来绑定
// on 4个 参数
$("from").on("click", f1);
$("from").on("click", f2);
$("form").off();// 移除所有事件
$("form").off("click");// 移除所有点击事件
$("form").off("click",f1);// 移除和f1绑定的点击事件
function f1(){
}
function f2(){
}
</script>
<head>
<script type="text/javascript" src= "jquery-3.3.1.min.js"></script>
<meta charset="UTF-8">
<title>jQuery</title>
<style type="text/css">
.item{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="item">1</div>
<div class="item">2</div>
</body>
<script type="text/javascript">
// jQuery
// DOM
// 获取元素
// $("选择器") 获取和选择器相匹配的所有元素
$(".item")
// 修改元素
// 设置一个属性
$(".item").css("color", "white");
//设置多个属性 参数时对象
$(".item").css({
"background-color":"green",
"margin-left":"50px",
"border":"1px red solid"
})
$(".item").css("width",function(index,oldValue){
console.log(index,oldValue);
return (index + 1) * 100;
});
// 获取元素属性 只能获取到第一个
// 设置元素属性 是对所有的元素生效
console.log($(".item").css("width"));
// 修改内容 innerText innerHTML value
console.log($('.item').html());
$(".item").eq(1).html("Ygs <b>sb</b>!");
$(".item").html(function(n){
return "这个class元素的index是:" + n;
});
// 通过JQ的选择器获取到的是JQ对象
// 通过原生方法获取到的是原生对象
// JQ对象 只能调用JQ的方法,原生对象只能调用原生的方法 但是JQ可以和JS混编
// 原生 -> JQ对象
var a = document.getElementsByClassName('item')[0];
$(a).css("color","red");
// JQ对象 -> 原生对象
$(".item")[0].innerHTML = "JQ转原生";
$(".item").get(0).innerHTML = "也是JQ转原生";
//JQ里 获取第几个 eq获取到的是JQ对象
$(".item").eq(1).html("这是第二个");
// 破坏性操作 和 回到破坏性操作之前
$(".item").css("background-color","pink").parent().css("border","2px red solid").end().css("height","200px");
// 移交$的控制权
// jQuery(".item") 等价于 $(".item")
// var pp = jQuery.noConflict();// 从此以后 不再使用 $ 代表 JQ
// pp(".item")
//创建元素
$("<div></div>").html("新的JQ对象").appendTo($('body'));
//删除元素
// remove() 同时清空绑定的事件
// empty() 删除元素内容 元素本身还在
// detach() 删除元素 不清空绑定事件
// 添加元素
// A.append(B) A里面添加B A是父级
// A.appendTo(B) 把A加到B里面 B是父级
//A.after(B) A后面添加B A在前面
//A.insertAfter(B) 把A插入到B后面 B在前面
// DOM属性 childNodes children parentNode
// className
// JQ对象设置属性
// attr设置的属性都会被添加到标签上,也能读取到标签上的自定义属性 prop不可以
// $(".item").attr("title","这是提示");
$(".item").prop("title","这是提示");
//prop 可以读取到原生对象的一些自带属性和自定义属性 attr 不能
// 事件 - 事件对象
</script>
上传数据
<body>
<form action="">
<input type="text" name="uName" />
<input type="submit" />
</form>
<div id="first">点我请求数据</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#first").click(function(){
$.ajax({
url:"http://10.80.8.123/ajax/help.php",
success:function(res){
console.log(res);
}
})
})
</script>
ajax
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// 原生对象 发送请求
// 创建请求对象
var request = new XMLHttpRequest();
// 设置请求 并发送
// true 异步请求
request.open("GET","text.json", true);
request.send();
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200) {
//请求成功
console.log(request.responseText)
}
}
</script>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// JQ对象 发送请求
$.ajax({
url:"text.json", // 请求目标
type:"GET", // 请求类型 POST 或者 GET (默认)
async:true, //true代表异步, false同步(基本上浏览器都不支持)
beforeSend:function(obj){
//在发送请求之前执行此函数
//检查一下请求是否是想要的
//如果return false 则 取消发送
console.log(obj)
// return false;
},
// 可以把success里面的this 改变指向
context:document.getElementsByTagName("body")[0],
timeout:5000,//设置超时时间
// 设置请求对象
// xhr:function(){
// var obj = new XMLHttpRequest()
// return obj;
// },
cache:true,//true 代表缓存 false 不缓存
success:function(res){
this.innerHTML += res;
}
});
</script>