在css中,伪元素的content是能读取到data属性的。
也就是说我们可以这样写css:
p.change:after {
?? ?content: attr(data-content);
}
js文件
$(this).addClass('change').attr('data-content', content);
这样你就可以随意改动了。
在css中,伪元素的content是能读取到data属性的。
也就是说我们可以这样写css:
p.change:after {
?? ?content: attr(data-content);
}
js文件
$(this).addClass('change').attr('data-content', content);
这样你就可以随意改动了。
需要jquery支持
//创建ajax类
function ajaxobj(){
this.url="";
this.data="";
this.type="post";
this.async=true;//true:同步 false:异步
this.success;//成功时执行
this.error;//失败时执行
this.complete=function(XHR,TextStatus){//完成时执行
if(XHR.statusText!="OK"){
if(typeof this.error == "function"){this.error();}
console.warn(that.url+"->"+XHR.statusText)
}
};
this.timeout=120000;//120秒超时
this.send=function(){
$.ajax(this);
}
}
function ajax(url,_post,callback,error){
var _ajax = new ajaxobj();
_ajax.url=url;
_ajax.data=_post;
_ajax.success=callback;
_ajax.error=error;
_ajax.send();
}
原生js ajax
来源http://www.cnblogs.com/a757956132/p/5603176.html
/* 封装_ajax函数
* @param {string}opt.type http连接的方式,包括POST和GET两种方式
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
* @param {object}opt.data 发送的参数,格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function _ajax(opt) {
opt = opt || {};
opt.method = opt.method.toUpperCase() || 'POST';
opt.url = opt.url || '';
opt.async = opt.async || true;
opt.data = opt.data || null;
opt.success = opt.success || function () {};
opt.error = opt.error|| function () {};
var xmlHttp = null;
if (XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}var params = [];
for (var key in opt.data){
params.push(key + '=' + opt.data[key]);
}
var postData = params.join('&');
if (opt.method.toUpperCase() === 'POST') {
xmlHttp.open(opt.method, opt.url, opt.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
xmlHttp.send(postData);
}
else if (opt.method.toUpperCase() === 'GET') {
xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
xmlHttp.send(null);
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
opt.success(xmlHttp.responseText);
}
if(xmlHttp.readyState == 4 && xmlHttp.status != 200){
opt.error(xmlHttp);
console.warn(`[${opt.method}]${opt.url} -> ${xmlHttp.status}-${xmlHttp.statusText}`)
}
};
}
/**
* 我喜欢的样子
*/
function ajax(url,_post,callback,error){
_ajax({
method: 'POST',
url: url,
data: _post,
success: function (response) {
callback(response);
},
error: error
});
}
类方法
//去除左右空格
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
//去除左空格
String.prototype.ltrim=function(){
return this.replace(/(^\s*)/g,"");
}
//去除右空格
String.prototype.rtrim=function(){
return this.replace(/(\s*$)/g,"");
}
函数
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function ltrim(str){ //删除左边的空格
return str.replace(/(^\s*)/g,"");
}
function rtrim(str){ //删除右边的空格
return str.replace(/(\s*$)/g,"");
}
Modal 属性
**m_系列——文字描述、内容类
//模态框抬头标题
Modal.m_title="string";
//模态框内容区域
Modal.m_body="string";//支持html对象
//模态框id
Modal.m_id="string";
**set_系列——执行函数类
//生成模态框底部按钮
Modal.set_btn({"string":callback})//按钮文字、执行函数
**基础系列
//弹出模态框
Modal.create()
//关闭模态框
Modal.close()
//模态框
function CreateModal(){
this.m_title="默认模态框";
this.m_body="默认内容";
this.m_id="newmodal";
this.m_target="body";
this.btn=[];
this.set_btn=function(data){
var btnarr=[];
for(var key in data){
var btn = document.createElement("button");
btn.className="btn btn-primary";
btn.onclick=data[key];
btn.innerHTML=key;
this.btn.push(btn);
}
}
this.close=function(){
$(".modal.fade").remove();
$(".modal-backdrop.fade").remove();
}
this.create=function(){
this.close();
var modal_block = document.createElement("div");
modal_block.className = "modal fade";
modal_block.id = this.m_id;
modal_block.setAttribute("data-show","true")
var modal_dialog = document.createElement("div");
modal_dialog.className="modal-dialog modal-lg";
var modal_content = document.createElement("div");
modal_content.className="modal-content";
var modal_head = document.createElement("div");
modal_head.className= "modal-header";
var btn_close = document.createElement("button");
btn_close.className="close";
btn_close.type="button";
btn_close.innerHTML="×";
btn_close.addEventListener("click",this.close);
modal_head.appendChild(btn_close);
var modal_head_p = document.createElement("h4");
modal_head_p.innerHTML=this.m_title;
modal_head.appendChild(modal_head_p);
modal_content.appendChild(modal_head);
var modal_body = document.createElement("div");
modal_body.className="modal_body";
if(typeof(this.m_body)=="string"){
modal_body.innerHTML=this.m_body;
}else{
modal_body.appendChild(this.m_body);
}
modal_content.appendChild(modal_body);
var modal_footer =document.createElement("div");
modal_footer.className="modal-footer";
this.btn.map(function(btns,index){
modal_footer.appendChild(btns);
})
modal_content.appendChild(modal_footer);
modal_dialog.appendChild(modal_content);
modal_block.appendChild(modal_dialog);
$(this.m_target).append(modal_block);
$("#"+this.m_id).modal('show');
}
}
manifest
{
"name":"Catch your Data",
"description":"Catch every data what you need",
"version":"1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*","http://service.miniice.cn/","storage"//storage必须有,储存权限
],
"browser_action": {
"default_title": "Get this page's Data.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version":2,
"content_scripts": [
{
"js":["jquery-2.2.0.min.js","getnumber.js"],
"matches":["https://sycm.taobao.com/portal/*"]//权限设置,可不设
}
],
"background": {
"scripts": ["jquery-2.2.0.min.js","ajax.js"]
},
"options_page":"options.html"
}
background - ajax.js
$.post("data.php","",function(ret){
console.log(ret);
chrome.storage.sync.set(ret, function(){
//do something
console.log("缓存成功")
});
})
content_scripts ?getnumber.js
chrome.storage.sync.get(null,function(result){
console.log(result);
})
注入js来源:http://www.2cto.com/article/201307/225986.html
发送ajax来源:http://www.cnblogs.com/onlyfu/p/4458025.html
manifest.json 内容
知识点包含:
* content_scripts注入js,background.scripts用来发送请求(content_scripts禁止发送ajax)
* Message 和 Request 区别
manifest
{
"name":"Catch your Data",
"description":"Catch every data what you need",
"version":"1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*","http://service.miniice.cn/"
],
"browser_action": {
"default_title": "Get this page's Data.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version":2,
"content_scripts": [
{
"js":["jquery-2.2.0.min.js","content_script.js"],
"matches":["https://sycm.taobao.com/portal/*"]
}
],
"background": {
"scripts": ["jquery-2.2.0.min.js","background.js"]
}
}
标签脚本(content_script)和背景页(background)交互可以有多种方式
其中我使用过 Message 和 Request
Message用于立即响应消息,多用于读取早已缓存的信息,不适合异步
Request多用于异步请求服务器
var jsonarr={
'name':'abc'
}
chrome.extension.sendMessage(jsonarr, function(ret){
console.log(ret);
});
chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){
var send={
"data":objRequest,
"info":"以上是您输入的信息",
"status":1,
}
sendResponse(send);
});
var jsonarr={
'version':'abc123'
}
chrome.extension.sendRequest(jsonarr, function(ret){
console.log(ret);
});
chrome.extension.onRequest.addListener(function(objRequest, _, sendResponse){
$.post("deal.php",objRequest,function(ret){
sendResponse(ret);
})
});
来源:http://www.nowamagic.net/librarys/veda/detail/1250
重点:
Object.prototype.toString.call(arr)==='[object Array]'
来源:http://www.jq22.com/jquery-info6549
改裁剪大小
//210行 this.$preview = this.options.$preview.css('position', 'relative');
//改为
this.$preview = this.options.$preview.css({'position': 'relative',"height":"560px","width":"350px"});
cona.addEventListener("touchmove",function(event){
event.preventDefault();//阻止其他事件
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
var touch = event.targetTouches[0]; // 把元素放在手指所在的位置
cona.style.left = touch.pageX + 'px';
cona.style.top = touch.pageY + 'px';
a.floatx=touch.pageX;
a.floaty=touch.pageY;
}
});