Javascript
读操作和写操作, .点是的的意思;
1.两种数据传输方式:
get / post
get 请求信息会在地址栏显示,跨域一般使用get方法
post 适用于比较隐秘的数据
使用方法(下面都是jq封装的ajax的使用)
$.ajax({
type:"get", //或者post
url:"forajax.php",
async:true,
dataType:“text”, //php访问对象文件时一般用text
success:function(data){ //data固定参数为请求完成后得到的数据
alert(data);
},
complete:function(){ //请求完成后进行的操作
},
})
获取自己的数据库数据,或者php后台处理过的数据这是一个登录功能的js部分 . 有php后台文件,所以必须从服务器的www文件进入页面 。localhost:8080或者直接用ip/xlayzheng/...
$.ajax({
type:"post",
url:"php/login-register.php", //这是数据传向的php文件
data:{
username:usernameVal,
userpwd:userpwdVal,
type:"login"
},
dataType:"text",
success:function(data){
if (data === "success") {
alert(usernameVal+",欢迎!")
$("#uname").val("");
$("#upwd").val("");
} else{
alert("用户名或密码错误!");
$("#upwd").val("");
}
},
})
--------------------------------------------------php部分---------------------------------------------------------------------
//获取数据
$_username = $_POST['username']; //什么方法传输的数据就是什么方法接受
$_userpwd = $_POST['userpwd'];
$_type = $_POST['type']; //传输的data的type属性,用以判断执行哪条语句
//第一步,定义数据库的信息
define("HOST","127.0.0.1"); //定义主机名
define("PORT","3306"); //定义端口号默认3306
define("DB_NAME","root"); //定义数据名用户名
define("DB_PWD","123456"); //定义用户名SQL数据库的密码
define("DB_CON","jenashop");//定义自己要操作的的数据库名
//-------------------------------------------------------------------第二步,创建数据库连接
$_link = new mysqli(HOST,DB_NAME,DB_PWD,DB_CON,PORT);
//------------------------------------------------------------------ 设置字符编码
$_link->set_charset("utf8");
if($_type==="login"){
//-----------------------------------------------------------第三步,创建一条数据库语句
$_sql = 'SELECT userpwd from userinfo WHERE username="'.$_username.'"';
//-----------------------------------------------------------执行查询语句
$_res = $_link->query($_sql);
//----------------------------------------------------------遍历结果集合,即使只有一行也要这一步
$_row = $_res->fetch_row();
//----------------------------------------------------------判断密码是否正确
if($_row[0] == $_userpwd){
echo "success";
}else {
echo "error";
}
//-----------------------------------------------------------释放数据
$_res->free();
}else{
//--------------------------------------------------------- 创建语句
$_sqlinsert = 'INSERT into userinfo(username,userpwd) value ("'.$_username.'","'.$_userpwd.'")';
//----------------------------------------------------------执行语句
$_resinsert = $_link->query($_sqlinsert);
//------------------------------------------------------------检查是否执行成功,注意后面是affected_rows
$_r = $_link->affected_rows;
echo $_r;
}
//------------------------------------------------------------------关闭数据库连接
$_link->close();
?>
Ajax跨域获取数据的例子获取到可以请求的地址后,利用Ajax,十分方便取到网站的数据
$(function(){
//输入框内,每次鼠标弹起时,进行搜索,并返回联想商品,与数量
$('.txt').on('keyup',function(){
$.ajax({
type:"get", //跨域请求一般用get方式
//天猫的数据地址
url:"https://suggest.taobao.com/sug?code=utf-8&q="+$('.txt').val()+"&_ksTS=1502958378801_4787&callback=jsonp4788&area=b2c&code=utf-8&k=1&bucketid=9&src=tmall_pc&isg=AsnJLVFs9O3EkIh2LbbvIw402PXjvr2QxO1ir2s-RbDvsunEtGbNGLfkgCD_",
//淘宝的数据地址
//url:"https://suggest.taobao.com/sug?code=utf-8&q=手机&_ksTS=1502958214110_1909&callback=jsonp1910&k=1&area=c2c&bucketid=1",
dataType:"jsonp",
jsonp:"callback", //百度的为cb,可以在网页数据传输时在地址栏确定不同网站的jsonp值
async:true,
success:function(data){
var res = data.result;
$(".result").html("");
for(var i = 0 ; i
$(".result").append($("
约"+res[i][1]+"件相关商品>>
"));
}
}
})
})
//商品搜索链接:
//https://list.tmall.com/search_product.htm?q=%E7%94%B5%E8%84%91&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton
//点击下面的联想商品进入相应页面
$(".result").on("click","li",function(e){
event.stopPropagation();
$(this).children().attr('href',"https://list.tmall.com/search_product.htm?q="+$(this).children().first().html()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");
$(".txt").val( $(this).children().first().html());
$(".result").html("");
})
//点击搜索,进入文本框对应商品的结果页面
$(".search").on("click",function(){
$(".result").html("");
$(this).attr('href',"https://list.tmall.com/search_product.htm?q="+$(".txt").val()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");
})
//点击文本框以外的地方时,取消联想
$(document).on("click",function(){
$(".result").html("");
$(".txt").val("");
})
})
-----------------------------------------------------------html部分----------------------------------------------------------------------
在php文件的编写中,基础的会用到的流程都在上述例子中。
1.变量的声明是用$符。
2.数据的接收方法要与传输的方法一致
3.创建数据连接时。端口号(本例中是PORT)必须是放再最后的。MySQL默认是3306。
4.设置字符编码也是很重要的,不然可能传输后的数据改变了编码格式,以至于后面的处理判断出现问题。
5.数据的释放有时会对整个代码的运行产生影响,这个看具体情况。
6.操作完成后记得要关闭数据库连接。
A . 内容
1.内置对象--数学(Math)
2.内置对象--日期(Date)
B .要点总结
1.Math (不需要创建,直接调用)
//Math对象比较特殊,他不需要创建。直接调用内部方法。
var a = 1.12111116;
Math.abs();//绝对值。
console.log(Math.floor(a));//向下取整。
console.log(Math.ceil(a))//向上取整。
console.log(Math.round(a));//四舍五入取整。
Math.random();//0-1随机数。
document.write(parseInt(Math.random()*100))
Math.PI;//3.1415926....
Math.pow();//哪个数的多少次方。
Math.sqrt();//某个数的平方根
console.log(getRandomInt(1,9))
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
2.Date(需要创建)
//Date对象,代表的是所有和日期有关的信息。就像一个盒子里面放了所有和时间有关的信息
var date = new Date();
console.log(date.getDate() ) // 获取日 1-31
console.log(date.getDay () ) // 获取星期 0-6(0代表周日)
console.log(date.getMonth () ) // 获取月 0-11(1月从0开始)
console.log(date.getFullYear () ) // 获取完整年份(浏览器都支持)
console.log(date.getHours () ) // 获取小时 0-23
console.log(date.getMinutes () ) // 获取分钟 0-59
console.log(date.getSeconds () ) // 获取秒 0-59
console.log(date.getMilliseconds () ) // 获取毫秒 (1s = 1000ms)
console.log(date.getTime () ) // 返回累计毫秒数(从1970/1/1午夜)
3.字符串方法
// charAt() 返回指定索引位置的字符
// fromCharCode() 将 Unicode 转换为字符串
// charCodeAt() 返回指定索引位置字符的 Unicode 值
var str = "chansojaoej"
var str1 ="sunkaisong"
console.log(str.charAt(2)) //a
console.log(str.charCodeAt(3)) //101
console.log(str.concat(str1)) //chansojaoej唐子恒
// concat() 连接两个或多个字符串,返回连接后的字符串
// indexOf() 返回字符串中检索指定字符第一次出现的位置
// lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
//join() 将数组链接为字符串
var arr = [1,2,3,4,5,6]
console.log(arr)
console.log(arr.join()) //123456
console.log(arr.join(" ")) //1 2 3 4 5 6 用空格连接
//split() 把字符串分割为子字符串数组
var str1 = "12345,124,46556"
console.log(str1.split("")) // 不给参数将每个字符进行分隔成数组
var str="How are you doing today?"
document.write(str.split(" ") )//How,are,you,doing,today? 给空格,就按空格分割为数组
document.write(str.split("") )//H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? 不给参数将每个字符进行分隔成数组
document.write(str.split("",5))//H,o,w, ,a 逐个分隔,并取五个元素
// slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
//substr() 从起始索引号提取字符串中指定数目的字符
console.log(str.substr(3,7))//第一个参数从索引值开始,第二个参数是长度
//substring() 提取字符串中两个指定的索引号之间的字符
console.log(str.substring(3,7))
//toLowerCase() //把字符串转换为小写
//toUpperCase() //把字符串转换为大写
// trim() 移除字符串首尾空白
// valueOf() 返回某个字符串对象的原始值
// toString() 返回字符串对象值
console.log(str.toString())
console.log(str.valueOf())
// match() 找到一个或多个正则表达式的匹配
// replace() 替换与正则表达式匹配的子串
// search() 检索与正则表达式相匹配的值
Angular框架:
module:
//http://cdn.code.baidu.com/ cdn库
// 注册模块 通过module函数,(获取页面中的)
// 第一个参数是这个模块的名字
// !!! 第二个参数是这个模块所依赖的模块, 如果不依赖任何模块也必须传递第二个参数,如果没有传递第二个参数,angular.module就不是创建一个模块
// angular.module 返回 刚刚创建的模块对象
var app= angular.module('myApp',[]);
// app.controller 创建一个控制器,所创建的控制器属于myApp模块
// app.controller('myCtrl');
// 控制器函数的参数中有一个$scope
angular.module('myApp').controller('myController', function($scope) {
// 当控制器执行时会自动执行的函数
$scope.user = {};
$scope.user.name = '';
// $scope可以往视图中暴露数据,还可以暴露行为
$scope.show = function() {
console.log($scope.user);
};
})
// 所有模块都通过 define 来定义
define(function(require, exports, module){
// 通过 require 引入依赖
var$ =require('jquery');
varSpinning =require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
});
兼容性
margin兼容性问题
display:inline-block
IE6 最小高度问题
IE6 双边距
li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
浮动元素之间注释,导致多复制一个文字问题
IE6 7 父级元素的overflow:hidden 是包不住子级的relative
IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
IE6下绝对定位元素和浮动元素并列绝对定位元素消失
IE6 下input的空隙