Javascript

2020-10-18  本文已影响0人  佛曰不可说_7d48

读操作和写操作, .点是的的意思;


  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][0]+"

约"+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的空隙






上一篇 下一篇

猜你喜欢

热点阅读