jQuery2
//属性选择器
<body>
<a href="#1">选择</a>
<a href="#1">选择</a>
<a href="#1">选择</a>
<a href="#1">选择</a>
<a href="#1">选择</a>
<a href="#1">选择</a>
<a href="#1">选择</a>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('a[href]').css('font-size','40px')
//过滤选择器
//last() first() eq(索引)
$('li').eq(3).css('color','yellow')
</script>
//DOM的操作
<body>
<h1 id="h">asf</h1>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var h1=document.getElementById("h");
//h1.innerText+="abc";
//h1.innerHTML="<span style='color: red;'>abc</span>"
//var text=document.createTextNode("abc");
//h1.appendChild(text);
//text() ===== innerText
//html() ===== innerHTML
//追加
$('h1').text($('h1').text()+"abc");
</script>
//属性的操作
<body>
<h1 align="center">asdfasdfasdf</h1>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* var h1=document.getElementsByTagName("h1")[0];
//var v=h1.getAttribute("align");
//h1.setAttribute("align","left");
var v=h1.getAttributeNode("align");
v.value="right";
//v.name
h1.removeAttributeNode(v);
*/
$('h1').attr('align','left');、
</script>
//元素CSS样式的操作
<body>
<div id="d1">
abc
</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// var div=document.getElementById("d1");
// div.style.height="200px"
// div.style.width="200px"
// div.style.border="1px black solid";
//div.style.cssText="color: red;font-size: 50px;font-weight:500;"
//$('#d1').css('height','200px').css('width','200px').css('border','1px black solid');
$('#d1').css({
'width': '100px',
'height': '100px',
'color': 'red',
'border': '1px black solid'
})
</script>
//元素样式的设置
<body>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
<h1>asdfasdfasdfsadd</h1>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//$('h1').eq(2).css('color','red');
//index 元素的索引，value css的属性旧值
$('h1').css('color', function(index, value) {
if(index%2==0){
return "red"
}else{
return "yellow";
}
})
</script>
//class属性的操作
<style type="text/css">
.d1 {
width: 200px;
height: 200px;
background: red;
}
.d2 {
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="d1">
</div>
<button type="button">切换颜色</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//$('div').attr('class','d2');
//添加class属性。
//$('div').addClass('d2');
$('button').click(function(){
$('div').toggleClass('d2');
})
</script>
//节点的操作
<body>
<h2>2222222</h2>
<div id="d2">
</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"> </script>
<script type="text/javascript">
/* var bd=document.body;
var h1=document.createElement("h1");
bd.appendChild(h1);
h1.remove(); */
//创建节点
var h1=$("<h1>abc</h1>");
$('body').append(h1); //给父标签，添加子元素
h1.appendTo('body'); //把一个标签，移动到另一个标签的内部。
$('h2').appendTo('#d2');
</script>
//调换顺序
<body>
<h1>1111111</h1>
<h1>1111111</h1>
<h2>2222222222222222222</h2>
<h2>2222222222222222222</h2>
<h2>2222222222222222222</h2>
<h2>2222222222222222222</h2>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var h1=$('h1');
$('h2').after(h1);
</script>
//包裹标签
//给每一个h1外面包裹一个div标签
//$('h1').wrap('<div></div>');
//给所有的h1标签外面只包裹一个div标签
$('h1').wrapAll('<div id="wai"></div>');
//移除包裹
$('h1').unwrap();
//给我的所有子标签，外面套一个父标签。
$('#wai').wrapInner("<div id='nei'></div>")
//事件的绑定
<body>
<button type="button">一个按钮</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//bind(事件名，处理函数)绑定事件
/* $('button').bind('click',function(){
alert("点了");
})
$('button').bind('mouseover',function(){
$('button').css('background','red');
}) */
//可以连缀绑定多个事件
$('button').bind('click',function(){
alert("点了");
}).bind('mouseover',function(){
//$('button').css('background','red');
//this 表示绑定了该事件的元素对象。
$(this).css('background','red');
}).bind('mouseout',function(){
$(this).css('background','yellow');
})
//解绑事件。
//$('button').unbind(); //解绑所有事件
$('button').unbind('click'); //根据事件名解绑某个事件
//bind() 和 unbind() 方法在Jquery3.0之后的版本废弃掉了
</script>
//事件的处理
<body>
<button type="button">一个按钮 </button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var one=function(){
alert(1111);
var two=function(){
alert(2222);
var three=function(){
alert(333);
}
$('button').bind('click',one).bind('click',two).bind('click',thr
//$('button').unbind('clic
//移除点击事件，对应的处理函数
$('button').unbind('click',one);
$('button').unbind('click',t
</script>
//事件的简写调用
<body>
<button type="button">一个安妮</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* $('button').bind('click',function(){
}); */
/* $('button').click(function(){
alert("abc");
}).mouseover(function(){
}).mouseout(function(){
}) */
$('button').hover(function(){
//处理鼠标移入
$(this).css("background","red")
},function(){
//处理鼠标移除。
$(this).css("background","yellow")
});
/*
$(document).ready(function(){
})
*/
</script>
//事件对象
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div id="">
<button type="button">按钮</button>
</div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('div').mousedown(function(e){
//$(this).css('background','red');
//target: 获取的是触发了该事件的元素
//currentTarget:获取的是绑定了该事件的那个元素。
//var obj=e.currentTarget;
//$(obj).css('background','yellow');
alert(e.button);
// alert(e.keyCode);
})
</script>
//自动触发事件
<body>
<button type="button">一个按钮</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function(){
alert("事件调用了");
}).trigger('click');
</script>
//事件的绑定
<body>
<button type="button" id="btn1">一个按钮</button>
<button type="button" id="btn2">我的按钮</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//绑定
$('btn1').on('click',function(){
alert("abc");
})
//解绑
$('button').off('click');
//one() 让事件只触发一次。
$('#btn2').one('click',function(){
alert("执行一次");
})
</script>
//显示隐藏动画
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div id="">
</div>
<button type="button">显示</button>
<button type="button">隐藏</button>
<button type="button">切换</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
$('div').show(1000);
})
$('button').eq(1).click(function(){
$('div').hide(1000);
})
$('button').eq(2).click(function(){
$('div').toggle(1000);
})
</script>
//下拉上卷动画
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div id="">
</div>
<button type="button">上卷</button>
<button type="button">下拉</button>
<button type="button">切换</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
$('div').slideUp(1000)
})
$('button').eq(1).click(function(){
$('div').slideDown(1000);
})
$('button').eq(2).click(function(){
$('div').slideToggle(1000);
})
</script>
//淡入淡出动画
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
</head>
<body>
<div id="">
</div>
<button type="button">淡出</button>
<button type="button">淡入</button>
<button type="button">切换</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
$('div').fadeOut(1000)
})
$('button').eq(1).click(function(){
$('div').fadeIn()(1000);
})
$('button').eq(2).click(function(){
$('div').fadeToggle(1000);
})
</script>
AJAX
//原生的AJAX的get请求
//1.创建对象
var xmlhttp = new XMLHttpRequest();
//2.打开后台接口，发送请求
//get请求，请求参数是拼接在url后面的。 ?num=1&name=abc
xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=1", true);
//3.发送请求
xmlhttp.send();
//4.接收服务端的响应
xmlhttp.onreadystatechange = function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取服务器的响应结果
var responseText = xmlhttp.responseText;
//alert(responseText);
var obj=JSON.parse(responseText);
var text=obj.jokes[0]
var bd=document.body;
bd.innerText=text;
}
}
</script>
//原生的AJAX的post请求
<body>
<button type="button" onclick="send()">发送Ajax请求之post请求</button>
</body>
</html>
<script type="text/javascript">
function send() {
//1.创建ajax对象
var ajax = new XMLHttpRequest();
//2.连接服务器
ajax.open('post', 'http://localhost:8080/login', true);
//3.post请求要设置请求头信息
ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//4.发送请求,post请求的请求参数要写到send()方法里面
ajax.send("username=张三&password=123456");
//接收后台的响应
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
var c = ajax.responseText;
alert(c);
}
}
}
</script>
//jQuery封装过后的AJAX请求get
<body>
<button type="button">发送Ajax请求</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function() {
//发送Ajax
$.ajax({
type: 'get',
url: 'https://autumnfish.cn/api/joke/list555',
//请求参数
data: {
'num': '2'
},
//请求成功之后的回调
success: function(res) {
//res 返回的结果，JQuery 已经把返回的JSON字符串，已经转换成了JSON对象。
alert(res.msg);
alert(res.jokes[0]);
},
//请求失败之后的回调
error: function(error) {
//alert("请求失败了")
//alert(error);
//console.log(error);
//console.log(error.status);
//console.log(error.)
alert(error.status);
alert(error.statusText);
},
dataType: 'json' //接收后台返回的数据类型
});
})
</script>
//jQuery封装过后的AJAX请求post
<body>
<button type="button">发送Ajax请求</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function() {
//发送Ajax
$.ajax({
type: 'post',
url: 'http://localhost:8080/login',
//请求参数
data: {
'username': '王五',
'password': '888888'
},
//请求成功之后的回调
success: function(res) {
//res 返回的结果，JQuery 已经把返回的JSON字符串，已经转换成了JSON对象。
alert(res.username);
alert(res.password);
},
//请求失败之后的回调
error: function(error) {
//alert("请求失败了")
//alert(error);
//console.log(error);
//console.log(error.status);
//console.log(error.)
alert(error.status);
alert(error.statusText);
},
dataType: 'json' //接收后台返回的数据类型
});
})
</script>
//AJAX之get方法
<body>
<button type="button">get请求</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function(){
/*
2. $.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
*/
$.get('https://autumnfish.cn/api/joke/list?num=1',function(res){
alert(res.msg);
},"json");
})
</script>
//AJAX之post方法
<body>
<button type="button">post请求</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function() {
/*
3. $.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
*/
$.post('http://localhost:8080/login', {
'username': '王五',
'password': '888888'
}, function(res) {
alert(res.username);
alert(res.password);
}, "json");
})
</script>
//get JSON方法
<body>
<button type="button">getJson请求</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').click(function() {
/*
4.直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback])
* url：请求路径
* data：请求参数
* callback：回调函数
*/
$.getJSON('https://autumnfish.cn/api/joke/list?num=1',function(res){
alert(res.msg);
});
})
</script>
跨域请求
//同源策略：浏览器处于安全考虑的一个机制
//跨域请求：就会收到同源策略限制，导致后台返回的数据，会被浏览器劫持。
//协议相同 + 域名相同 + 端口号相同
//浏览器才认为是同一个网站.
//才不同受到同源策略的影响.
//才可以正常的发送 AJAX 请求.
/* 跨域的解决的方式：
1.jsonp 只支持get请求的跨域解决
jsonp：解决跨域的原理是什么？
jsonp，就是利用了某些html标签，在进行跨域请求时，不受同源策略的限制。
img script;
*/
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<img src="https://cn.vuejs.org/images/logo.png" >
</body>
</html>
<script type="text/javascript">
alert($);
</script>
/*2.cors 解决，推荐的解决方式
当前浏览器发现这次Ajax请求时跨域请时，
浏览器会通过一个请求头Origin 告诉服务器这次请求是一个跨域请求，期待你的回答。
服务器默认都会处理，跨域请求。并且给出响应，但是默认服务器默认没有对于跨域给出一个明确的表示。
也就是服务器没有设置 Access-Control-Allow-Origin 导致浏览器，不知道服务器的明确表态，所以就拦截了。
默认浏览器就会把服务返回的数据劫持了。
Origin:http://127.0.0.1:8848
Access-Control-Allow-Origin: *
*/
//JSONP跨域请求
<body>
<button type="button" onclick="send()">jsonp请求</button>
</body>
</html>
<script type="text/javascript">
//后台做法：
/*
tel=13259141515
callback=getData
getData({
num:100
})
//jsonp 后台返回数据的形式
getData({
mts:'1325914',
province:'陕西',
catName:'中国联通',
telString:'13259141515',
areaVid:'30503',
ispVid:'137815084',
carrier:'陕西联通'
})
callback：这个名称是大家约定俗成的
*/
//原生JSONP的写法
function getData(res){
alert(res.province);
}
</script>
<script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=getData"></script>
//jQuery发送JSONP请求
<body>
<button type="button">发送jsonp请求</button>
</body>
</html>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
jQuery111308155352926962021_1603010735068({
mts:'1325914',
province:'陕西',
catName:'中国联通',
telString:'13259141515',
areaVid:'30503',
ispVid:'137815084',
carrier:'陕西联通'
})
*/
function getJsonData(res) {
alert(res.province);
}
$('button').click(function() {
$.ajax({
type: "GET",
url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
data: {
tel: "13259141515"
},
//多了这个
jsonp: "callback", //jsonp 请求 回调函数名Jqurey会自动生成
//指定jsonp的回调函数
//jsonpCallback:"getJsonData",//可以指定JSONP回调的函数名
success: function(res) {
alert(res.catName);
},
//数据类型jsonp
dataType: "jsonp"
});
//简化写法
/* $.getJSON("https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=?", function(res) {
alert(res.catName);
}); */
})
</script>
扫一扫
3489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
