㈠ HTML拼接輸入框中的字元串生成URL並訪問得到返回信息
1、直接將代碼放入一個以.html為後綴的文件中,並且下載一個js,取名為jquery-1.7.2.min.js,放在同一個目錄下即可。
2、效果如代碼後的圖片
3、本次答案僅供參考,不喜勿噴
*************************以下為代碼部分 begin*****************************
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字元串拼接返回url地址</title>
<style>
/**初始化樣式**/
*{margin:0;padding:0;}
/**清除浮動樣式**/
.clc{clear:both;}
/**文字居中**/
.txtcenter{text-align:center;}
.url_content{width:70%;margin:20px auto;}
.c_input,.c_btn,.c_show{overflow:hidden;}
.ci_left,.ci_right{float:left;min-height:200px;border:1px solid #AEAEAE;}
.ci_left{width:40%;}
.ci_right{margin-left:1%;width:58%;background:#E7E7E7;}
.cil_unit{width:70%;margin:20px auto;overflow:hidden;}
.inp_txt,.cil_input{float:left;}
.inp_txt{color:#30C0FF;height:30px;margin-top:5px;width:100px;}
.cil_input{height:30px;width:180px;border-radius:5px;border:1px solid #CFCFCF;}
.btn_1,.btn_2,.btn_3{float:left;width:18%;margin:20px 5%;height:45px;line-height:45px;border-radius:5px;background:#30C0FF;color:white;}
.cs_f{border:1px solid #C7C7C7;height:45px;line-height:45px;margin:20px auto;font-size:18px;overflow:hidden;}
.c_red{color:red;}
.c_green{color:green;}
</style>
<!-- 引入jq -->
<script src='jquery-1.7.2.min.js'></script>
</head>
<body>
<div class='url_content'>
<div class='c_input'>
<div class='ci_left'>
<div class='cil_unit'>
<div class='inp_txt'>伺服器地址:</div>
<input class='cil_input serveraddr' type='text' placeholder='請輸入伺服器地址' />
</div>
<div class='cil_unit'>
<div class='inp_txt'>ID號:</div>
<input class='cil_input idaccount' type='text' placeholder='請輸入ID' />
</div>
<div class='cil_unit'>
<div class='inp_txt'>設置項:</div>
<input class='cil_input setvalue' type='text' placeholder='請輸入設置項' />
</div>
</div>
<div class='ci_right'>
<p>返回結果:</p>
<p class='txtcenter result'>這里顯示返回來的結果</p>
</div>
</div>
<div class='clc'></div>
<div class='c_btn'>
<div class='btn_1 txtcenter'>功能1 (function1)</div>
<div class='btn_2 txtcenter'>功能2 (function2)</div>
<div class='btn_3 txtcenter'>功能3 (function3)</div>
</div>
<div class='clc'></div>
<div class='c_show'>
<div class='cs_f'><p>功能1按鈕點擊效果為:http://<span class='c_red'>xxx.com:222</span>/<span class='c_green'>function1</span>.do?info={"A":"<span class='c_red'>yyy</span>","B":"333<span class='c_green'>funciton1</span>","C":"<span class='c_red'>zzz</span>"}<p></div>
<div class='cs_f'><p>功能2按鈕點擊效果為:http://<span class='c_red'>xxx.com:222</span>/<span class='c_green'>function2</span>.do?info={"A":"<span class='c_red'>yyy</span>","B":"333<span class='c_green'>funciton2</span>"}<p></div>
</div>
</div>
<script>
function changeContent(flag){
var inp1 = $.trim($(".serveraddr").val()) ;//伺服器地址
var inp2 = $.trim($(".idaccount").val()) ;//ID
var inp3 = $.trim($(".setvalue").val()) ;//設置
if(flag=="1"){
var content = "http://"+inp1+"/function1.do?info={'A':'"+inp2+"','B':'333function1','C':'"+inp3+"'}";
}else if(flag=="2"){
var content = "http://"+inp1+"/function2.do?info={'A':'"+inp2+"','B':'333function2'}";
}
$(".result").html(content);
}
$(".btn_1").click(function(){//功能1按鈕點擊觸發
changeContent("1");
});
$(".btn_2").click(function(){//功能1按鈕點擊觸發
changeContent("2");
});
</script>
</body>
</html>
*************************以上為代碼部分 end*****************************
㈡ HTML拼接輸入框中的字元串生成URL
漢字亂碼一般是由於程序頁面編碼導致的,建議做以下檢查:
1、檢查你前端html頁面編碼格式
建議將編碼設置為utf8,<meta charset="utf-8">
2、檢查你的post、或者get請求頁面的編碼,與前端編碼一致,最好都改為utf8
做完以上兩種操作,亂碼不會再有
㈢ ajax裡面,如何對data中的變數名進行字元串拼接
這樣肯定不行的,變數名不能隨著for循環而改變,你要對一個變數進行多次處理才可以
㈣ 在html頁面里如何連接兩個字元串
這是js裡面的內容,在html頁面裡面是沒有連接字元串變數這個說法的
一般js裡面是用+運算符來進行字元串連接
其中需要注意的是,這個引號一定要配對,如果在字元串裡面有單個引號出現的話,可以用轉義字元\"來代替「符號
demo如下
<!doctype html><html><head><meta charset="utf-8"><title>字元串連接</title></head><body><script>var num =10086var aHtml="<a href=\"http:/wpa。qq。com/msgrd?v=3&uin="+num+"&menu=yes\"<a href=\"http:/wpa。qq。com/msgrd?v=3&uin=" +num+ "&menu=yes"alert(aHtml);</script></body></html>
㈤ jsp字元串拼接
el?你如果是 request傳過去了的話,那麼頁面上直接就寫
${A.a}+${A.b}+${A.c}就可以了。
㈥ 前端 遍歷數組對象然後拼接成一句話,包括逗號和空格
直接上代碼:
functionarr2Str(arr,connectStr){
varstr="";
connectStr=connectStr===void0?"":connectStr;
//遍歷數組
arr.forEach(ele=>{
//取出對應的值
for(varkeyinele){
//字元串拼接
str+=ele[key]+connectStr;
}
})
str=str.substr(0,str.length-1);
console.log(str);
returnstr;
}
//使用方法:
vartestArr=[{Name:"Talk2",Mole:"Intel",Who:"WLAN",Action:"can't",English:"beconnect"}];
arr2Str(testArr,"");//傳入需要拼接的數組和拼接符
運行效果如圖:
㈦ 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊,點擊事件啊,都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條,滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題,但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue,從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下:
(1)slice(), 參數可以是負數,負數表示從字元串最後一個位置開始切割到對應結束位置
(2)substring(),參數不可為負數,切割第一個位置到第二個位置的字元串
(3)substr(), 參數可以是負數,第一個參數是開始位置,第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數,結果作為一個新的數組返回,並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數,沒有返回值,注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值,如果所有元素都符合判斷條件,則返回true,否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件,則返回true,所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串,並用第一個參數作為連接符
15、Array.splice(開始位置,刪除個數,元素)
其中rece使用方法為:
callback (執行數組中每個值的函數,包含四個參數)
1、previousValue (上一次調用回調返回的值,或者是提供的初始值(initialValue))
2、currentValue (數組中當前被處理的元素)
3、index (當前元素在數組中的索引)
4、array (調用 rece 的數組) initialValue (作為第一次調用 callback 的第一個參數。)
如果沒有提供initialValue,rece 會從索引1的地方開始執行 callback 方法,
數組去重:
常用對象方法
1、Object.assign()
用於克隆,兩個參數,將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意,該函數與==運算符不同,不會強制轉換任何類型, 應該更加類似於===,但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱,返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象,或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化,讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊(包)
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫,提供一致性,及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩,從而簡化了 JavaScript、 數字、對象、字元串等
㈧ sql語句的拼接問題,前端傳遞過來的字元串我們怎麼拼接
因為你的這個欄位是字元串類型,必須使用 '' 來包含你的查詢值。