jquery
$()的作用:
注:需要引入jQuery
```javascript
1.$(function(){})写回调函数是加载
2.%(原生对象)是原生对象转jQuery对象
3.$(html)是创建元素节点
4.$(选择器)是获取元素
```
遍历
案例:在li中移入变背景颜色
```javascript
let $li = $('ul li');
//移入
$li.mouseenter(function(){
$(this).css('background','pink');
})
//移出
$li.mouseleave(function(){
$(this).css('background','');
})
```
第一种遍历
1.each(callback)
对象方法 $.(''): 直接是回调函数
index:下标
value:元素名是原生对象要转jQuery
let $li = $('ul li');
//第一种
$li.each(function(index,value){
$(value).hover(function(){
//移入时所要发生的事情
$(this).css('background','pink');
},function(){
//移出时所要发生的事
$(this).css('background','');
})
})
第二种遍历
2.jQuery.each(object, [callback])
工具方法:$点的方法就是工具方法;第一个是对象,
object:需要例遍的对象或数组。
callback:每个成员/元素执行的回调函数。
用于遍历对象或数组
//遍历输出li里的值-文本
$.each($li,function(index,value){
//点击事件
$(value).click(function(){
alert($(this).text())
})
})
ajax
###1.load(url, [data], [callback])
概述:载入远程 HTML 文件代码并插入至 DOM 中;跨域访问 可以把公共的页面放到一个公共页面
url::url 必选(url,参数类型字符串)
data:data 可选,发送至服务器的 key/value 数据。参数类型为 object;在jQuery 1.3中也可以接受一个字符串了。访问后端时使用
callback:载入成功时回调函数。
利用jQuery的ajax访问公共页面(public.html);点击按钮出现内容
<input>
<div></div>
$('input').click(function(){
//放到div中 点击出现全部内容
1.$('div').load('public.html');
//放到div中,点击出现一部分-两种方法
2.1$('div').eq(0).load('public.html #header');
2.2$('div[class=footer]').load('public.html #header');
//第三个参数 回调函数//改变需要的内容的样式
//一般不会使用,执行容易出错
3.$('div').eq(0).load('public.html #header',function(response){
//等加载完在改变
//放在外面是找不到的-异步-从上到下-等加载完使用回调
$('h3').css('fontSize',50); $('h3').css('color','red');
});
})
2.get
jQuery.get(url, [data], [callback], [type])
概述:以 get 方式发送数据、处理静态页
是工具方法直接 点
url:待载入页面的URL地址
data:待发送 Key/value 参数。类型是map(对象)下标可以改
callback:载入成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
$('input').click(function(){
1.//访问文本文档
$.get('abc.txt',(data)=> {
$('div').text(data)
})
2.//访问json 会做自动转换,jQuery原来是啥接受回来是啥对象
//[1,2,3,4]
//原生ajax接受到的是字符串
$.get('arr.json',(data)=> {
$('div').html('<strong>' + data[0] + '</strong>');
})
3.//访问json
//对象形式{ }
$.get('json.json',(data)=> {
$('div').text(json.name);
})
4.1//访问后端php
$.get('php/index.php?uname=李四&upwd=123',(data)=> {
$('div').html(data);
})
4.2$.get('php/index.php','uname=李四&upwd=123',(data)=> {
$('div').text(data);
})
4.3$.get('php/index.php',{
uname:李四,
upwd:123
},(data)=> {
$('div').html(data);
})
})
3.post
jQuery.post(url, [data], [callback], [type])
以 post 方式发送数据;不能url地址后传参
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
$('input').click(function(){
1.//访问文本文档
$.post('abc.txt',(data)=> {
$('div').text(data)
})
2.//访问json 会做自动转换,jQuery原来是啥接受回来是啥对象
//[1,2,3,4]
//原生ajax接受到的是字符串
$.post('arr.json',(data)=> {
$('div').html('<strong>' + data[0] + '</strong>');
})
3.//访问json
//对象形式{ }
$.post('json.json',(data)=> {
$('div').text(json.name);
})
4.1$.post('php/index.php','uname=李四&upwd=123',(data)=> {
$('div').text(data);
})
4.2$.post('php/index.php',{
uname:李四,
upwd:123
},(data)=> {
$('div').html(data);
})
})
3.jQuery.getJSON(url, [data], [callback])
只处理json
url:发送请求地址。
data:待发送 Key/value 参数。
callback:载入成功时回调函数
$(function(){
$('input').click(function(){
$.getJSON('index.json',(data)=> {
$('div').text(data[0]);
})
})
})
//[123,456]
//123
4.jQuery.getScript(url, [callback])
url:待载入 JS 文件地址。
callback:成功载入后回调函数。
<input type="button" value="请求json">
<div></div>
$(function(){
$.getScript('index.js');
})
//alert('嘻嘻');
jQuery.ajax(url,[settings])
$.ajax({
type: "POST/GET",
url: "some.php",
data: "uname=John&upwd=123",
data:{
uname:John,
upwd=123
}
success: function(msg){
alert( "Data Saved: " + msg );
},
success:(data)=> {
alert(data);
}
});