目录

1. JQuery基础

  • jQuery是目前使用最广泛的javascript函数库
  • jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
  • JQ比JS更快,且JQ支持浏览器兼容

API网址: http://hemin.cn/jq/

1.1. 基本语法

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

<script type="text/javascript">

    $(document{
// 在这里写JQ代码
var $img = $("img")[0];
}); </script>

https://code.jquery.com/ 版本下载(一般用1版本),一般使用未压缩版本

1.2. JQ和JS的差异

  • 原生JS和JQ入口函数的加载模式不同

    • JS: 等到DOM元素加载完成,并且图片加载完成后才执行
    • JQ: 一旦DOM加载完成,马上执行
  • 原生JS如果有多个入口函数,会覆盖,而JQ不会

JS

<script type="text/javascript">

  window.onload = function(){
var oDiv = document.getElementById("div"); alert(oDiv.innerHTML);
}
</script>

JQ(比JS要更加快)

<script type="text/javascript">

    $(document).ready(function(){
var $div = $('#div');
alert($div.html() + 'JQuery');
}); // 匿名函数写法: 推荐
$(function(){
var $div = $('#div');
alert($div.html() + 'JQuery');
});
</script>

1.3. JQ入口函数的写法

<script type="text/javascript">

    // 方法1:
$(document).ready(function(){
//代码
}); // 方法2: 匿名函数写法: 推荐
$(function(){
// 代码
});
</script>

1.4. JQ核心函数

  • 核心函数: $();

    • 1.接收一个函数 $(function(){...});
    • 2.接收一个字符串
      • 2.1.接收一个字符串选择器,返回JQ对象(保存找到的DOM) var box1 = $(".box1");
      • 2.2.接收一个代码片段,返回JQ对象(保存创建的DOM) var $p = $("<p>我是帅哥</p>")(自动创建p元素)
      1. 接收一个DOM元素 var $span = $(span);(DOM元素会被包装成JQ对象)

1.5. JQ对象

  • JQ对象是一个伪数组,有0到length-1的属性,并且有length属性

2. JQ静态和实例方法

  • 静态方法: 类调用
  • 实例方法: 实例对象调用
<script type="text/javascript">

    function AClass(){

    }
// 添加静态方法
AClass.staticMethod = function(){
alert("666");
}
// 调用静态方法
AClass.staticMethod(); // 给这个类添加实例方法
AClass.prototype.instanceMethod = function(){
alert("实例");
} // 调用实例方法
var a = new AClass();
a.instanceMethod();
</script>

2.1. JQ静态方法: each

<script type="text/javascript">

    // 数组
var arr = [4,6,7];
// 伪数组
var oj = {0:1,1:3,2:5,3:7,4:9, length:5}; // JS:只能遍历数组,不能是伪数组
arr.forEach(function (value, index){
console.log(index, value); // 打印arr和index
}); // JQ: 可以遍历数组以及伪数组
$.each(arr, function(index, value){
console.log(index, value);
}); </script>

2.2. JQ静态方法: map方法

<script type="text/javascript">
var arr = [4,6,7];
var oj = {0:1,1:3,2:5,3:7,4:9, length:5}; // JS: 只能遍历数组,不能是伪数组
arr.map(function(value, index, arr){
console.log(index, value, array);
}) // JQ: 可以遍历数组以及伪数组, 默认返回空数组(但是可以return值)
var $res = $.map(arr, function(value, index){
console.log(index, value);
return index + value;
}); </script>

2.3. JQ静态方法: 其他方法

<script type="text/javascript">
var arr = [4,6,7];
var oj = {0:1,1:3,2:5,3:7,4:9, length:5};
var ok = {"name":'df', age: "33"};
var fn = function(){};
var w = window(); var str = " hhhd ";
// 去除字符串两端空格,返回新的字符串
var $res = $.trim(str); $.isWindow(w); // 判断传入的对象是否是window对象,返回T/F
$.isArray(arr); // 判断是不是真数组
$.isFunction(fn); // 判断是否是函数 </script>

2.4. JQ静态方法: holdReady方法

  • holdReady暂停ready方法的执行,实现顺序执行的功能
  • 只有点击按钮后才会执行ready
<script type="text/javascript">

    // 暂停ready执行
$.holdReady(true);
$(function(){
alert("666");
}) window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
$.holdReady(false);
}
} </script>

3.JQuery选择器

JQ核心思想

选择某个网页元素,然后对它进行某种操作

2.1. 基本选择器

选择器 说明
#id 按照id查元素
element 按照标签名字查
.class 按照类名
* 全部
selector1,selector2,selectorN 多个选择器组合,找到匹配任意一个类的元素。
ancestor descendant 在给定的祖先元素下匹配所有的后代元素
parent>child 在给定的父元素下匹配所有的子元素
prev + next 匹配所有紧接在 prev 元素后的 next 元素
$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$("div,span,p.myClass") // 找到任意一个
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$("form > input") // 选择form下的input元素
$("label + input") // 匹配所有跟在 label 后面的 input 元素
$('input[name=first]') // 选择name属性等于first的input元素

2.2. 过滤选择器

选择器 说明
:first 获取第一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素,从 0 开始计数
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:last 获取最后个元素
:It(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
:focus
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
$('li:first');               // 获取匹配的li组中的第一个
$('li:last') // 获取匹配的最后个元素
$("input:not(:checked)") // 查找所有未选中的 input 元素
$("tr:even") // 查找表格的1、3、5...行(即索引值0、2、4...)
$("tr:odd") // 查找表格的2、4、6行(即索引值1、3、5...)
$("tr:eq(1)") // 查找第二行
$("tr:gt(0)") // 从第二行开始的所有
$("tr:lt(2)") // 选择0-3行
$(":header").css("background", "#EEE"); // 给页面内所有标题加上背景色
$("tr:hidden") // 查找隐藏的 tr

2.3. 内容选择器

主要有一下四种:

选择器 说明
:contains(text) 找到包含指定文本内容的元素
:empty 找到既没有文本内容也没有子元素的指定元素
:has(selector) 找到包含指定子元素的元素
:parent 找到有文本内容,或者有子元素的
<script type="text/javascript">

    // 找到既没有文本内容也没有子元素的指定元素
var $div = ("div:empty"); // m // 找到有文本内容,或者有子元素的
var $div = $("div:parent") // 1234 // 找到包含指定文本内容的元素
var $div = $("div:contains("我是div")"); //12 // 找到包含指定子元素的元素
var $div = $("div:has('span')"); //3 </script>
...
<div id="m"></div>
<div id="1">我是div</div>
<div id="2">我是div123</div>
<div id="3"><span></span></div>
<div id="4"><p></p></div>

3. JQ属性

3.1. 属性方法

  • 属性: 对象身上保持的变量或者属性

  • 如何操作属性

    • 赋值: 对象.属性名称=值
    • 获取: 对象.属性名称
  • 属性节点: 在编写HTML代码的时候,在HTML标签中添加的属性就是属性节点,可以在chorme中查找(attributes保存的)

  • 操作属性节点:

    • 赋值: 对象.setAttributes("name", "value");
    • 获取: 对象.getAttributes("name")
属性 说明
attr(name|pro|key,val|fn) 获取,设置属性节点
removeAttr(name) 删除属性节点
prop(n|p|k,v|f) 获取,设置属性节点和属性(推荐使用)
removeProp(name) 删除属性节点和属性

1. JQ属性节点方法: attr和removeAttr方法

  • 如果传递一个参数,为获取属性节点值(只有第一个)
  • 如果传递两个参数,为设置属性节点值(全部设置),不存在自动新增
  • 无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
attr(name|properties|key,value|fn);
removeAttr(name);
<script type="text/javascript">

    // 获取: 只返回第一个span1
$("span").attr("class");
// 设置:全部都设置为box
$("span").attr("class", "box");
$("span").attr("abc", "box"); // 不存在自动新增
// 删除: 全部删除属性节点
$("span").removeAttr("class");
$("span").removeAttr("class name"); // 同时删除多个
</script>
<span class="span1" name="ok"></span>
<span class="span2" name="no"></span>

2. JQ属性节点方法:prop方法

  • prop方法:特点和attr一模一样
  • removeprop: 特点和removeAttr一模一样
  • 注意点: prop不仅能够操作属性节点(attr只能操作属性节点),也可以操作属性节点
<script type="text/javascript">

    $('span').eq(0).prop("demo", "img");
$('span').prop("demo");
$('span').removeprop("demo");
</script>
<span class="span1" name="ok"></span>
<span class="span2" name="no"></span>

3.2. JQ: CSS类的操作

方法 说明
addClass(class|fn) 添加类
removeClass([class|fn]) 删除类
toggleClass(class|fn[,sw]) 切换类,有就删除,没有就添加
<script type="text/javascript">

    var btn = document.getElementsByTagName("button");
// 添加类
btn[0].onclick = function(){
$("div").addClass("class1"); // 添加一个
$("div").addClass("class1 class2"); // 添加多个
}; // 删除类
btn[1].onclick = function(){
$("div").removeClass("class1");
$("div").removeClass("class1 class2");
}; // 切换类
btn[2].onclick = function(){
$("div").removeClass("class1");
}
</script> <button>添加类</button>
<button>删除类</button>
<button>切换类</button>

3.3. HTML 代码/文本/值

方法 说明
html([val|fn]) 和之前的innerHTML一模一样
text([val|fn]) 和之前的innerText一模一样
val([val|fn|arr])
<script type="text/javascript">

    var btn = document.getElementsByTagName("button");
// html
btn[0].onclick = function(){
// 设置
$("div").html("<p>我是段落<span>我是span</span></p>");
// 获取
$("div").html();
}
// 文本
btn[1].onclick = function(){
// 设置
$("div").text("<p>我是段落<span>我是span</span></p>");
// 获取
$("div").text();
}
// value
btn[2].onclick = function(){
$("input").val("请输入内容");
} </script> <button>设置html</button>
<button>设置text</button>
<button>设置value</button>
<div></div>
<input></input>

4. CSS

4.1.操作CSS样式

方式 说明
css(name|pro|[,val|fn]) 设置,获取css样式
<script type="text/javascript">
$(function(){
// 设置css样式
$("div").css({
width: "100px",
height: "200px"
background: "red"
}); // 获取css样式
$("div").css("width");
})
</script>

4.2. 操作CSS位置和尺寸

方法 说明
offset([coordinates]) 获取元素距离窗口的偏移量
position() 获取元素距离定位元素的偏移量,不能设置
scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移
height([val|fn]) 获取元素高度
width([val|fn]) 获取元素宽度
innerHeight() 理解
innerWidth() 理解
outerHeight([soptions]) 理解
outerWidth([options]) 理解
<script type="text/javascript">
$(function(){
// 获取,设置宽高
$(".wow").width();
$(".wow").width("200px"); // 获取,设置offset
$(".wow").offset().left; // 距离窗口左边的offset
$(".wow").offset({ // 设置offset
left: 10
});
// position: 只能获取,不能设置(通过css设置)
$(".wow").position().left; // 距离父元素的偏移量 // scrolltop
$(".wow").scrolltop();
$("div.demo").scrollTop(300);
})
</script>

5. JQ事件

5.1. 事件绑定和解绑

1. 绑定

JQ绑定事件的语法:(事件不会覆盖

eventName(fun(){});

2. 解绑

<script type="text/javascript">

    function test1(){
alert("666");
}
function test2(){
alert("666");
} // 绑定事件
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(test2); // 解除事件,
// - 不传递移除所有,
// - 传递一个,会移除所有指定事件
// - 传递两个,会移除指定类型的指定事件
$("button").off('click');
$("button").off('click', test1);
$("button").on("click", "p", test1);
$("body").off("click", "p", foo); </script>

5.2. 页面载入

方法 说明
ready(fn) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(function($) {
// 你可以在这里继续使用$作为别名...
});

5.3. 事件处理

方法 说明
on(eve,[sel],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数。
off(eve,[sel],[fn]) 在选择元素上移除一个或多个事件的事件处理函数
bind(type,[data],fn) 和on一样
one(type,[data],fn) 和on类似,唯一不同的是这个只执行一次
trigger(type,[data]) 自动触发事件
triggerHandler(type, [data]) 自动触发事件,不会触发事件冒泡,也不会触发事件默认行为
unbind(t,[d|f]) 和on一样
  • on,off的用法
<script type="text/javascript">
function test1(){
alert("666");
}
function test2(){
alert("666");
} // 绑定事件
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(test2); // 解除事件,
// - 不传递移除所有,
// - 传递一个,会移除所有指定事件
// - 传递两个,会移除指定类型的指定事件
$("button").off('click');
$("button").off('click', test1);
$("button").on("click", "p", test1);
$("body").off("click", "p", foo); </script>
  • trigger的用法(结合事件冒泡)
<script type="text/javascript">

    $(function(){
$("#father").click(function(){
alert("父亲");
})
}); $(function(){
$("#son").click(function(){
alert("儿子");
// 这里就可以阻止事件冒泡
// return false;
})
}); // trigger 触发儿子元素,会触发事件冒泡
$('son').trigger("click");
// triggerHandler:不会触发事件冒泡,即使没有阻止事件冒泡
$('son').triggerHandler("click");
</script> <div id="father">
<div id="son"></div>
</div>

1. 事件冒泡和默认行为

1.1 冒泡

  • 冒泡: 当在两个嵌套盒子中同时绑定点击事件时,会同时执行这两个函数
  • 取消冒泡:
    • 只需要在子元素中return false;
    • 也可以在子元素设置event事件event.StopPropagation();
<script type="text/javascript">

    $(function(){
$("#1").click(function(){
alert("父亲");
})
}); $(function(){
$("#2").click(function(){
alert("儿子");
// 这里就可以阻止事件冒泡
return false;
})
});
</script> <div id="1">
<div id="2"></div>
</div>

1.2. 默认行为

  • 对于链接和表单元素,我们并没有绑定点击事件,它们会默认跳转,这就是默认事件,我们可以更改这个行为
  • 阻止行为:
    • return false
    • 也可以通过event对象event.preventDefault()
<script type="text/javascript">

    $(function(){
$("web").click(function(event){
alert("父亲");
event.preventDefault();
})
}); </script> <a href = "www.baidu.com" id="web">这是百度</a>

2. 自定义事件

<script type="text/javascript">
$(function(){
// 自定义一个点击事件
$("#son").on( 'myClick', function(){
alert("儿子");
})
});
// 触发自定义事件
$('son').trigger("myClick");
</script> <div id="father">
<div id="son"></div>
</div>

5.4. 事件委派

  • 事件委托: 请别人帮忙做事情,将做完的结果反馈给我们
方法 说明
delegate(s,[t],[d],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
undelegate([s,[t],fn])
<script type="text/javascript">

    $(function(){
// 将li的点击事件托付给ul
// 新增的li,通过事件冒泡就可执行
$("ul").delegate("li", "click", function(){
alert(this);
}) }) </script>
... <ul>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
</ul>

5.5. 事件移入移出事件

方法 说明
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn]) 移入,子元素移入移出不会触发父元素(推荐)
mouseleave([[data],fn]) 移出,子元素移入移出不会触发父元素(推荐)
mousemove([[data],fn])
mouseout([[data],fn]) 移出,子元素移入移出也会触发父元素(不推荐)
mouseover([[data],fn]) 移入,子元素移入移出也会触发父元素(不推荐)
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
hover(fn) 同时监听移入移出

6.JQ动画效果

6.1. 基本:显示隐藏

方法 说明
show([s,[e],[fn]]) 动画形式显示
hide([s,[e],[fn]]) 动画形式隐藏
toggle() 显示了就隐藏,隐藏了就显示
<script type="text/javascript">

      $(function(){
$("btn").eq(0).click(function(){
// 1秒的时候逐渐显示图片,显示完成后调用函数
$("div").show(1000, function(){
alert("动画执行完成");
})
})
})
</script>

6.2. 滑动

  • p: params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • s: speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
  • e: easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
  • fn: 在动画完成时执行的函数,每个元素执行一次。
  • c: clearQueue:如果设置成true,则清空队列。可以立即结束动画。
  • j: jumpToEnd:如果设置成true,则完成队列。可以立即完成动画。
  • c: clearQueue:如果设置成true,则清空队列。可以立即结束动画。
  • q: queueName:队列名词,默认是Fx,动画队列。
方法 说明
slideDown([s],[e],[fn]) 动画形式展开
slideUp([s,[e],[fn]]) 动画形式收起
slideToggle([s],[e],[fn]) 动画形式切换
scroll 滚动的时候触发

6.3 淡入淡出

方法 说明
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],o,[e],[fn]]) 淡入程度
fadeToggle([s,[e],[fn]]) 切换淡入淡出

6.4. 自定义

方法 说明
animate(p,[s],[e],[fn]) 用于创建自定义动画的函数。
stop([c],[j]) 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行
delay(d,[q]) 延迟
finish([queue]) 和stop类似
<script type="text/javascript">

      $(function(){
$("btn").eq(0).click(function(){
// 第一个参数:接收一个对象,在对象里面修改one的属性(自带动画效果)
// 第二个参数:动画时间
// * 第四个参数: 指定动画节奏: "linear" 和 "swing"
// 第三个参数: 动画完成的回调函数
$('.one').animate({
width: 500
}, 1000, function{
alert("666");
}).delay(2000).animate({
height: 500
}, 1000);
// 立即停止当前的所有动画,继续执行后续的动画
$('button').stop();
// $('button').stop(false);一样的效果
// $('button').stop(false,false);一样的效果
// 立即停止当前的所有动画,后面的也不执行
$('button').stop(true);
// $('button').stop(true,false);一样的效果
// 立即完成当前的动画,继续执行后续的动画
$('button').stop(false, true);
// 立即完成当前的动画,停止后续所有的动画
$('button').stop(true, true);
})
})
</script>

7. 文档处理

7.1. 添加节点

1. 内部插入

  • cotent: 要追加到目标中的内容
  • function(index, html)返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。
方法 说明
append(content|fn) 向每个匹配的元素内部追加内容。
appendTo(content) 上同
prepend(content|fn) 向每个匹配的元素内部前置内容。
prependTo(content) 上同

2. 外部插入

方法 说明
after(content|fn) 在每个匹配的元素之后插入内容。
before(content|fn) 在每个匹配的元素之前插入内容。
insertAfter(content) 上同
insertBefore(content) 上同
<script type="text/javascript">

      $(function(){
$("btn").eq(0).click(function(){
// 内部插入
// 1. 创建节点
var $s1 = $('<li>新增的节点</li>')
// 2. 添加节点
$("ul").append($s1); // 添加到尾部
$s1.appendTo("ul");
$("ul").preappend($s1); // 添加到前部
$s1.preappendTo("ul"); // 外部插入
$("ul").after($s1); // 添加ul外部的尾部
$s1.insertAfter("ul");
$("ul").before($s1); // 添加ul外部的尾部
$s1.insertBefore("ul");
})
})
</script>

7.2. 删除节点

方法 说明
empty() 删除指定元素
remove([expr]) 删除指定元素的内容和子元素,指定元素本身不删除
detach([expr]) 和empty一模一样
<script type="text/javascript">

      $(function(){
$("btn").eq(0).click(function(){
// 删除
$("div").remove(); // 删除指定元素
$("div").empty(); // 删除指定元素的内容和子元素,指定元素本身不删除
})
})
</script>

7.3. 替换节点

方法 说明
replaceWith(content|fn) 替换所有匹配的元素为指定的元素
replaceAll(selector) 类似
<script type="text/javascript">

      $(function(){
$("btn").eq(0).click(function(){
// 替换
// 1.新建元素
var $h6 = $("<h6>我是标题6</h6>");
// 2. 替换
$("h1").replaceWith($h6);
$h6.replaceAll("h1");
})
})
</script>

7.4. 赋值节点

节点 说明
clone([Even[,deepEven]]) 复制元素
<script type="text/javascript">

      $(function(){
$("btn").eq(0).click(function(){
// 复制
// 浅复制: 复制元素,不复制事件(点击事件)
var $li = $("li:first").clone(false);
$("ul").append($li); // 深复制: 复制元素和事件
var $li = $("li:first").clone(true);
$("ul").append($li);
})
})
</script>

8. AJAX语法

8.1. 什么是服务器

  • 用于网页和服务器交换数据的
  1. 什么是服务器?
  • 服务器也是电脑,只不过是一台永远运行的电脑,根据服务功能不同分为:

    • 文件服务器
    • 邮件服务器
    • web服务器
    • 等等
  1. 如何让电脑能够提供某种服务?

    • 如何让电脑可以聊天? 安装聊天软件,QQ,微信...
    • 如何让电脑可以听歌? 安装音乐软件,QQ音乐,酷狗...
    • 如何让电脑可以浏览网页? 安装相应的浏览器网页软件,谷歌,IE...
  2. 如何让电脑提供管理网站的服务?

    • 安装Web服务软件, Apache, IIS, Tomcat, NodeJS...
    • 安装了Web服务器的电脑,我们称为“Web服务器”;

服务器软件:wampserver

8.2. wampserver软件介绍

1. 含义

W: windows操作系统

A: Apache 世界第一的服务器软件,特点是简单,速度快,性能稳定

M: MySQL 数据库

P: PHP 超文本预处理器,直接将代码嵌入HTML文档中执行,简单

2.wampserver的操作

启动的时候一定要关闭本地的mysql,只有是绿色才能用

http://127.0.0.1/ 查看wampserver

8.3. PHP基础语法:后端语法

PHP语法和JS语法类似

  • PHP文件必须放在服务器文件夹下面, 通过ip找到服务器文件夹(C:\wamp64\www)(所有后端语言都是这样)
<?php
// 1. 注释和JS一样
// 2. 定义变量: 和JS类似(var--> $)
$num = 10;
echo $num;
echo "<br>"; // 3. 定义数组:print_r才能打印数组
// 3.1. 取出数组内容
$arr = array(1,3,5);
print_r($arr);
echo "<br>";
echo $arr[1];
echo "<br>"; // 4. 定义字典(对象)(:---> =>)
// 4.1. 取出字典---dict["key"]
$dict = array("name"=>"kkk", "age"=>"33");
print_r($dict);
echo "<br>";
echo $dict["name"];
echo "<br>"; // 5. 循环判断
// if/switch/三目/for/while
if($num>=18){
echo "成年人";
} else {
echo "未成年";
};
echo "<br>";
// 三目
$res = ($num >=18)? "成年人" : "未成年";
echo $res;
echo "<br>";
// switch
$age = 20;
switch($age){
case 0:
echo "0";
break;
case 1:
echo "1";
break;
default:
echo "******";
break;
};
//for
echo "<br>";
for($i=0;$i<count($arr); $i++){
echo $arr[$i];
echo "<br>";
};
// while
$index=0;
while($index<count($arr)){
echo $arr[$index];
echo "<br>";
$index++;
}
?>

8.3.1 Get请求

  1. 表单的数据会显示在提交的网址上, 例如:http://www.baidu.com/?userName=kkk&userPW=123
  • 首先在文件夹下创建html文件,表单
<form action="test.php" method="get">
<input type="text" name="userName"><br>
<input type="password" name="userPW"><br>
<input type="submit" value="提交"><br>
</form>
<?php
print_r($_GET); // Array ( [userName] => sfdads [userPW] => 123 )
echo $_GET["userName"];
?>

8.3.2 Post请求

  • url不会显示任何数据, 数据被放在请求头中
  • 首先在文件夹下创建html文件,表单
<form action="test.php" method="post">
<input type="text" name="userName"><br>
<input type="password" name="userPW"><br>
<input type="submit" value="提交"><br>
</form>
  • 服务器通过php的$_POST获取提交的数据
<?php
print_r($_POST); // Array ( [userName] => sfdads [userPW] => 123 )
echo $_POST["userName"];
?>

8.3.3. GET和POST的差异

方法 相同点 不同点 应用场景
GET 发送数据给服务器 将数据放在URL之后,对数据大小有限制 非敏感的小数据
POST 发送数据给服务器 将数据放在请求头中,对数据大小无限制 敏感,大数据

8.3.4 POST文件上传

1. 基本文件上传

  • 创建上传表单(enctype="multipart/form-data"必须加)
<form action="test.php" method="post" enctype="multipart/form-data">
<input type="file" name="upFile"><br>
<input type="submit" value="提交"><br>
</form>
  • 创建上传脚本

<?php
print_r($_FILES);
echo "<br>";
// 1. 获取上传文件对应的字段
// Array ( [upFile] => Array ( [name] => 9.PNG [type] => image/png
// [tmp_name] => C:\wamp64\tmp\php8B71.tmp [error] => 0 [size] => 630718 ))
$fileInfo = $_FILES["upFile"];
// 2. 获取上传文件的名称
$fileName = $fileInfo["name"];
// 3. 获取上传文件的临时文件路径
$filePath = $fileInfo["tmp_name"]; // 4. 移动文件到新的路径
move_uploaded_file($filePath, "./data/".$fileName); ?>

第一个参数是表单的 input name,第二个下标可以是 "name", "type", "size", "tmp_name""error"。就像这样:

  • $_FILES["file"]["name"] : 被上传文件的名称
  • $_FILES["file"]["type"] : 被上传文件的类型
  • $_FILES["file"]["size"] : 被上传文件的大小,以字节计
  • $_FILES["file"]["tmp_name"] : 存储在服务器的文件的临时副本的名称
  • $_FILES["file"]["error"] : 由文件上传导致的错误代码

2. 大文件上传

  • 默认情况下,上传文件的大小是有限制的,我们可以修改php.ini文件的如下内容
file_uploads = On                   是否允许上传文件,默认on
upload_max_filesize = 2048M 上传的最大限制
post_max_size = 2048M 通过POST请求的最大数据 max_execution_time = 30000 脚本最长的执行时间,单位是秒
max_input_time = 30000 接收提交的数据的时间限制
memory_limit = 2048M 最大的内存消耗

8.4. AJAX-GET

8.4.1. 什么是AJAX

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

  • 用途: 用于动态页面和加载数据

8.4.2. 使用AJAX的五大步骤以及其封装

  • AJAX和IE浏览器兼容问题---------section 1

  • AJAX在IE浏览器中的缓存问题-----section 2

  • 在一个单独的JS文件中封装5个功能

  • 创建一个名为myAjax.js

function obj2str(data) {
/*
{
"userName":"lnj",
"userPwd":"123456",
"t":"3712i9471329876498132"
}
*/
data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
data.t = new Date().getTime();
var res = [];
for(var key in data){
// 在URL中是不可以出现中文的, 如果出现了中文需要转码
// 可以调用encodeURIComponent方法
// URL中只可以出现字母/数字/下划线/ASCII码
res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
}
return res.join("&"); // userName=lnj&userPwd=123456
} function ajax(option) {
// 0.将对象转换为字符串
var str = obj2str(option.data); // key=value&key=value;
// 1.创建一个异步对象
var xmlhttp, timer;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.设置请求方式和请求地址
/*
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
*/
if(option.type.toLowerCase() === "get"){
xmlhttp.open(option.type, option.url+"?"+str, true);
// 3.发送请求
xmlhttp.send();
}else{
xmlhttp.open(option.type, option.url,true);
// 注意点: 以下代码必须放到open和send之间
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(str);
} // 4.监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
*/
if(xmlhttp.readyState === 4){
clearInterval(timer);
// 判断是否请求成功
if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
xmlhttp.status === 304){
// 5.处理返回的结果
// console.log("接收到服务器返回的数据");
option.success(xmlhttp);
}else{
// console.log("没有接收到服务器返回的数据");
option.error(xmlhttp);
}
}
}
// 判断外界是否传入了超时时间
if(option.timeout){
timer = setInterval(function () {
console.log("中断请求");
xmlhttp.abort();
clearInterval(timer);
}, option.timeout);
}
}

9. JQuery和自定义的AJAX封装的对比

<script src="jquery-1.12.4.js"></script>
<script src="myAjax.js"></script>
<script type="text/javascript"> window.onload = function(){
var btn = document.getElementById("btn");
// 方法1: JQuery自带的ajax
btn.onclick = function (ev1) {
$.ajax({
type: "GET",
url: "test.php",
data: "userName=kk&userPW=12345",
success: function (msg) {
alert("Data saved " + msg);
},
error: function (xhr) {
alert(xhr.status);
}
})
}; // 方法2: 自己写的myajax
ajax({
url: "test.php",
data: {
"userName": "kko",
"userPW": "12345"
},
type: "GET",
timeout: 3000,
success: function (msg) {
alert("Data saved " + msg);
},
error: function (xhr) {
alert(xhr.status);
}
});
} </script>

10. Ajax-XML

10.1. 什么是XML

  • XML 指可扩展标记语言,类似HTML, XML 被设计用来传输和存储数据。
  • 用于前端和后端交换数据
  • XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息。
  • 所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器。解析器把 XML 转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象。

XML中的内容必须放在根标签中,标签自定义,XML没有预定义的标签

10.2. XML的用途

  • ML 把数据从 HTML 分离

如果你需要在 HTML 文档中显示动态数据,那么每当数据改变时将花费大量的时间来编辑 HTML。

通过 XML,数据能够存储在独立的 XML 文件中。这样你就可以专注于使用 HTML 进行布局和显示,并确保修改底层数据不再需要对 HTML 进行任何的改变。

  • XML 简化数据共享

XML 数据以纯文本格式进行存储,因此提供了一种独立于软件和硬件的数据存储方法。

  • XML 使您的数据更有用

不同的应用程序都能够访问您的数据,不仅仅在 HTML 页中,也可以从 XML 数据源中进行访问。

  • XML 用于创建新的 Internet 语言

很多新的 Internet 语言是通过 XML 创建的:(XHTML, WSDL, WAP, RSS, RDF, SMIL)

10.3. XML结构

  • 首行声明xml版本号和编码格式
  • 所有标签自定义,每个标签必须闭合, 标签大小写敏感,必须有父元素,设置属性的值必须加引号
  • xml中空格会被保留
  • xml中的属性用于提供额外信息 <person sex="female"></person>
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- This is a comment -->
<note date="08/08/2008">
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

10.4. XML在ajax中的使用

  • 前端代码:发送请求
<script src="jquery-1.12.4.js"></script>
<script src="myAjax.js"></script>
<script type="text/javascript"> window.onload = function(){
var btn = document.getElementById("btn"); btn.onclick = function (ev1) {
ajax({
type: "GET",
url: "test.php",
data: {
"userName": "kko",
"userPW": "12345"
},
timeout: 3000,
success: function (xhr) {
console.log(xhr.responseXML);
// 这里返回document
var res = xhr.responseXML;
// 获取xml数据和js获取数据一样的
console.log(res.getElementsByTagName("to")[0].innerHTML);
},
error: function (xhr) {
alert(xhr.status);
}
});
}
} </script>
  • 后端代码:返回前端
<?php
// 执行结果中有中文可能有乱码,必须设置
header("content-type:text/xml; charset=utf-8");
// 获取xml文件,返回给浏览器
echo file_get_contents("info.xml");
?>
  • xml数据文件
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- This is a comment -->
<note date="08/08/2008">
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

10.5. XML DOM

  • XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法
  • DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容,并创建新的元素。元素,它们的文本,以及它们的属性,都被认为是节点。
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

11. JSON

  • JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快,更易解析

  • JSON文件info.txt

{
"name": "okok",
"age": "33"
}
  • PHP文件testing.php
<?php
echo file_get_contents("info.txt");
?>
  • HTML文件

```html
<script src="jquery-1.12.4.js"></script>
<script src="myAjax.js"></script>
<script type="text/javascript"> window.onload = function(){
var btn = document.getElementById("btn"); btn.onclick = function (ev1) {
ajax({
type: "GET",
url: "test.php",
data: {
"userName": "kko",
"userPW": "12345"
},
timeout: 3000,
success: function (xhr) {
// 查看json数据
var str = xhr.responseText;
var obj = JSON.parse(str); // 将json转化为JS对象
console.log(obj); //{"name": "okok", "age": "33"}
var sname = obj.name;
var sage = obj.age;
},
error: function (xhr) {
alert(xhr.status);
}
});
}
} </script>

Web前端教程4-JQuery教程的更多相关文章

  1. 大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)

    大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教 ...

  2. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  3. Yeoman+Bower+gulp web前端自动化工作流程(初级教程)

    Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...

  4. 进击的Python【第十六章】:Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  5. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  6. 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  7. 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

    原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...

  8. 用grunt搭建自动化的web前端开发环境-完整教程

    原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...

  9. 【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发者.假设你如今还不知道grunt或者听说过. ...

  10. 1+x证书Web前端开发CSS3详细教程

    web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...

随机推荐

  1. 一个简单的cmake例子

    一个简单的cmake例子CMakeLists.txt,生成动态库文件,可以指定发布目录. 尚不支持: 1.交叉编译环境配置 2.添加依赖库   #在当前目录新建一个build目录,然后cd build ...

  2. pod command

    pod 基础使用命令 创建Podfile文件 1 pod init 使用命令打开Podfile文件 1 open -a Xcode Podfile 搜索pod 库 1 pod search 库名 更新 ...

  3. gitbash安装与使用

    1. 下载安装git (windows版) 网址:https://git-scm.com/download/win 点击for windows版本->下载 2. 点击exe文件安装,安装完成后打 ...

  4. Luogu P5279 [ZJOI2019]麻将

    ZJOI2019神题,间接送我退役的神题233 考场上由于T2写挂去写爆搜的时候已经没多少时间了,所以就写挂了233 这里不多废话直接开始讲正解吧,我们把算法分成两部分 1.建一个"胡牌自动 ...

  5. .NET 基金会完成第一次全面改选

    .NET基金会是一个独立的组织,支持.NET社区和开源,旨在拓宽和加强.NET生态系统和社区.这可以通过多种方式完成,包括项目指导,指导,法律和营销帮助,技术和财务支持设置等,2014年微软组织成立. ...

  6. 缓存穿透,缓存雪崩,热点key及解决办法

    1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...

  7. 博客系统typecho的安装与使用

    之前用过wordpress和emlog的博客系统,感觉上wordpress功能强大,插件多,而且也不局限博客网站,就是资源占用比较高,emlog比较简单,资源占用少,就是界面不太喜欢,功能相对也少了些 ...

  8. redis bind连不上的坑

    由于需要在内网其他服务器上连接redis服务器(192.168.1.110),本想直接在redis配置文件中加上目标的IP地址: bind 192.168.1.166 就可以了,实际上不正确. red ...

  9. Jason Wang:记录自己所想所得(第一次作业)

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 我在这个课程的目标是 学会现代软件工程的思想,运用到实际中去 这个作业在哪个具体方面帮助我实现目标 ...

  10. ProgressWheelDialogUtil【ProgressWheel Material样式进度条对话框】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单封装网络请求时的加载对话框以及上传.下载文件的进度加载对话框. 效果图 代码分析 ProgressWheel : 自定义view ...