Code666 (代码贴、代码片段)

[JavaScript] js常用汇总 →→→→→进入此内容的聊天室

来自 , 2021-01-05, 写在 JavaScript, 查看 129 次.
URL http://www.code666.cn/view/248e8443
  1. JS函数修改html的元素内容,及修改属性内容
  2. document.getElementById("aid").innerHTML="World";
  3. document.getElementById("aid").href="http://www.jikexueyuan.com";
  4. document.getElementById("aid").style="width:120px";
  5. document.getElementById("aid").style.color="blue";
  6. document.getElementById("aid").setAttribute("class", "abc");
  7. document.getElementById("aid").className ="abc";
  8.  
  9. JS操作自定义属性
  10. <input type="text" id="txtBox" displayName="123456" />
  11. 获取自定义属性值:
  12. document.getElementById("txtBox").getAttribute("displayName");
  13. document.getElementById("txtInput").attributes["displayName"].nodeValue
  14. 设置自定义属性值:
  15. document.all.txtBox.setAttribute("displayName ","123456");
  16. document.getElementById("txtInput").attributes["displayName"].nodeValue = "123456"
  17.  
  18. JS动态添加html元素,以及属性的简单实例
  19. function test(){
  20.  //创建节点div
  21.  var lswt_2=document.createElement("div");
  22.  //设置节点id
  23.  lswt_2.id='lswtColse';
  24.  //设置节点属性
  25.  lswt_2.style.width='11px';
  26. lswt_2.style.height='10px';
  27. lswt_2.style.top='0px';
  28. lswt_2.style.right='0px';
  29. lswt_2.style.position='absolute';
  30. lswt_2.style.background='url(7.gif)';
  31. lswt_2.style.backgroundRepeat='no-repeat';
  32.  //为这个节点添加点击事件
  33.  lswt_4.addEventListener("click",loc,false);
  34.  //把这个节点放到那里？放到id为lswt的元素下
  35.  var element_2=document.getElementById("lswt");
  36.  //插入这个节点
  37.  element_2.appendChild(lswt_2);
  38.  }
  39.  
  40. JS操作cookie
  41. $.cookie('productid', $(this).attr("pid")); 写入
  42. $(".country-selectinput").html($.cookie('productname')); 读取
  43.  
  44. JS把返回的json字符串转换成json数组
  45. var serData = $.parseJSON(data);
  46.  
  47. JS判断是否Touch屏幕
  48. function isTouchScreen(){
  49.     return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
  50. }
  51.  
  52. JS获取移动设备初始化大小
  53. function getInitZoom(){
  54.     if(!this._initZoom){
  55.         var screenWidth = Math.min(screen.height, screen.width);
  56.         if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){
  57.             screenWidth = screenWidth/window.devicePixelRatio;
  58.         }
  59.             this._initZoom = screenWidth /document.body.offsetWidth;
  60.         }
  61.     return this._initZoom;
  62. }
  63.  
  64. JS获取cookie值
  65. function getCookie(name) {
  66.     var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  67.     if (arr != null) return unescape(arr[2]);
  68.     return null
  69. }
  70. JS设置cookie值
  71. function setCookie(name, value, Hours) {
  72.     var d = new Date();
  73.     var offset = 8;
  74.     var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
  75.     var nd = utc + (3600000 * offset);
  76.     var exp = new Date(nd);
  77.     exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
  78.     document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
  79. }
  80.  
  81. JS判断鼠标滚轮向上向下滚动
  82. var initTop = $(window).scrollTop();
  83. $(window).scroll(function () {
  84.     var scrollTop = $(document).scrollTop();
  85.      if(scrollTop > initTop){
  86.         //向下滚动
  87.      } else {
  88.         //向上滚动
  89.      }
  90.      initTop = scrollTop;
  91. })
  92.  
  93. JS按样式表名称搜索getElementsByClassName
  94. function getElementsByClassName(name) {
  95.     var tags = document.getElementsByTagName('*') || document.all;
  96.     var els = [];
  97.     for (var i = 0; i < tags.length; i++) {
  98.         if (tags.className) {
  99.             var cs = tags.className.split(' ');
  100.             for (var j = 0; j < cs.length; j++) {
  101.                 if (name == cs[j]) {
  102.                     els.push(tags);
  103.                     break
  104.                 }
  105.             }
  106.         }
  107.     }
  108.     return els
  109. }
  110.  
  111. JS清除html代码中的脚本
  112. function clear_script(){
  113.     K1.value=K1.value.replace(/<script.*?>[\s\S]*?<\/script>|\s+on[a-zA-Z]{3,16}\s?=\s?"[\s\S]*?"|\s+on[a-zA-Z]{3,16}\s?=\s?'[\s\S]*?'|\s+on[a-zA-Z]{3,16}\s?=[^ >]+/ig,"");
  114. }
  115. 动态执行JavaScript脚本
  116.  function javascript(){
  117.     try{
  118.       eval(K1.value);
  119.     }catch(e){
  120.       alert(e.message);
  121.     }
  122. }
  123.  
  124. JS实现base64解码
  125. function base64_decode(data){
  126.     var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  127.     var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,ac = 0,dec = "",tmp_arr = [];
  128.     if (!data) { return data; }
  129.     data += '';
  130.     do {
  131.             h1 = b64.indexOf(data.charAt(i++));
  132.             h2 = b64.indexOf(data.charAt(i++));
  133.             h3 = b64.indexOf(data.charAt(i++));
  134.             h4 = b64.indexOf(data.charAt(i++));
  135.             bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;
  136.             o1 = bits >> 16 & 0xff;
  137.             o2 = bits >> 8 & 0xff;
  138.             o3 = bits & 0xff;
  139.             if (h3 == 64) {
  140.                     tmp_arr[ac++] = String.fromCharCode(o1);
  141.             } else if (h4 == 64) {
  142.                     tmp_arr[ac++] = String.fromCharCode(o1, o2);
  143.             } else {
  144.                     tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
  145.             }
  146.     } while (i < data.length);
  147.     dec = tmp_arr.join('');
  148.     dec = utf8_decode(dec);
  149.     return dec;
  150. }
  151.  
  152. JS实现utf8解码
  153. function utf8_decode(str_data){
  154.     var tmp_arr = [],i = 0,ac = 0,c1 = 0,c2 = 0,c3 = 0;str_data += '';
  155.     while (i < str_data.length) {
  156.             c1 = str_data.charCodeAt(i);
  157.             if (c1 < 128) {
  158.                     tmp_arr[ac++] = String.fromCharCode(c1);
  159.                     i++;
  160.             } else if (c1 > 191 && c1 < 224) {    
  161.                     c2 = str_data.charCodeAt(i + 1);
  162.                     tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
  163.                     i += 2;
  164.             } else {
  165.                     c2 = str_data.charCodeAt(i + 1);
  166.                     c3 = str_data.charCodeAt(i + 2);
  167.                     tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
  168.                     i += 3;
  169.             }
  170.     }
  171.     return tmp_arr.join('');
  172. }
  173.  
  174. JS获取窗体可见范围的宽与高
  175. function getViewSize(){
  176.     var de=document.documentElement;
  177.     var db=document.body;
  178.     var viewW=de.clientWidth==0 ?  db.clientWidth : de.clientWidth;
  179.     var viewH=de.clientHeight==0 ?  db.clientHeight : de.clientHeight;
  180.     return Array(viewW ,viewH);
  181. }
  182.  
  183. JS阻止浏览器默认事件
  184. function stopDefault( ev ) {
  185.     //阻止默认浏览器动作(W3C)
  186.     if ( ev && ev.preventDefault )
  187.         ev.preventDefault();
  188.     //IE中阻止函数器默认动作的方式
  189.     else
  190.         window.event.returnValue = false;
  191.     return false;
  192. };
  193.  
  194. JS提取页面代码中所有网址
  195. var aa = document.documentElement.outerHTML.match(/(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(http:\/\/[\w\-\.]+[^\"\'\(\)\<\>\[\] ]+)/ig).join("\r\n").replace(/^(src=|href=|url\()[\"\']*|[\"\'\>\) ]*$/igm,"");
  196. alert(aa);
  197.  
  198. JS返回顶部的通用方法
  199. function backTop(btnId) {
  200.     var btn = document.getElementById(btnId);
  201.     var d = document.documentElement;
  202.     var b = document.body;
  203.     window.onscroll = set;
  204.     btn.style.display = "none";
  205.     btn.onclick = function() {
  206.         btn.style.display = "none";
  207.         window.onscroll = null;
  208.         this.timer = setInterval(function() {
  209.             d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
  210.             b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
  211.             if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
  212.             }, 10);
  213.     };
  214.     function set() {
  215.         btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
  216.     }
  217. };
  218. backTop('goTop');
  219.  
  220. JS获得URL中GET参数值
  221. // 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
  222. function get_get(){
  223.     querystr = window.location.href.split("?")
  224.     if(querystr[1]){
  225.         GETs = querystr[1].split("&");
  226.         GET = [];
  227.         for(i=0;i<GETs.length;i++){
  228.               tmp_arr = GETs.split("=")
  229.               key=tmp_arr[0]
  230.               GET[key] = tmp_arr[1]
  231.         }
  232.     }
  233.     return querystr[1];
  234. }
  235.  
  236. JS判断浏览器种类（IE firefox chrome opera safari）
  237. function isBrowser(){
  238.     var Sys={};
  239.     var ua=navigator.userAgent.toLowerCase();
  240.     var s;
  241.     (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:
  242.     (s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:
  243.     (s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:
  244.     (s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:
  245.     (s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;
  246.     if(Sys.ie){//Js判断为IE浏览器
  247.         alert('http://www.phpernote.com'+Sys.ie);
  248.         if(Sys.ie=='9.0'){//Js判断为IE 9
  249.         }else if(Sys.ie=='8.0'){//Js判断为IE 8
  250.         }else{
  251.         }
  252.     }
  253.     if(Sys.firefox){//Js判断为火狐(firefox)浏览器
  254.         alert('http://www.phpernote.com'+Sys.firefox);
  255.     }
  256.     if(Sys.chrome){//Js判断为谷歌chrome浏览器
  257.         alert('http://www.phpernote.com'+Sys.chrome);
  258.     }
  259.     if(Sys.opera){//Js判断为opera浏览器
  260.         alert('http://www.phpernote.com'+Sys.opera);
  261.     }
  262.     if(Sys.safari){//Js判断为苹果safari浏览器
  263.         alert('http://www.phpernote.com'+Sys.safari);
  264.     }
  265. }
  266.  
  267. Jquery中$.post和$.ajax的用法
  268. $.ajax({
  269.     type:'get',
  270.     url:'http://www.www.phpernote.com/rss',
  271.     beforeSend:function(XMLHttpRequest){
  272.         //ShowLoading();
  273.     },
  274.     success:function(data,textStatus){
  275.         $('.ajax.ajaxResult').html('');
  276.         $('item',data).each(function(i,domEle){
  277.             $('.ajax.ajaxResult').append('<li>'+$(domEle).children('title').text()+'</li>');
  278.         });
  279.     },
  280.     complete:function(XMLHttpRequest,textStatus){
  281.         //HideLoading();
  282.     },
  283.     error:function(){
  284.         //请求出错处理
  285.     }
  286. });
  287.  
  288. JS固定在网页顶部不随浏览滚动而消失的DIV层
  289. /*
  290. *滚动条滑动，位置不变的DIV层
  291. *div_id：DIV的ID属性值，必填参数
  292. *offsetTop：滚动条滑动时DIV层距顶部的高度，可选参数
  293. */
  294. function fixDiv(div_id,offsetTop){
  295.     var Obj=$('#'+div_id);
  296.     if(Obj.length!=1){return false;}
  297.     var offsetTop=arguments[1]?arguments[1]:0;
  298.     var ObjTop=Obj.offset().top;
  299.     var isIE6=$.browser.msie && $.browser.version == '6.0';
  300.     if(isIE6){
  301.         $(window).scroll(function(){
  302.             if($(window).scrollTop()<=ObjTop){
  303.                     Obj.css({
  304.                         'position':'relative',
  305.                         'top':0
  306.                     });
  307.             }else{
  308.                 Obj.css({
  309.                     'position':'absolute',
  310.                     'top':$(window).scrollTop()+offsetTop+'px',
  311.                     'z-index':1
  312.                 });
  313.             }
  314.         });
  315.     }else{
  316.         $(window).scroll(function(){
  317.             if($(window).scrollTop()<=ObjTop){
  318.                 Obj.css({
  319.                     'position':'relative',
  320.                     'top':0
  321.                 });
  322.             }else{
  323.                 Obj.css({
  324.                     'position':'fixed',
  325.                     'top':0+offsetTop+'px',
  326.                     'z-index':1
  327.                 });
  328.             }
  329.         });
  330.     }
  331. }
  332.  
  333. jquery 获取checkbox的选中值（一组和单个）
  334. var id_array=new Array();
  335. $('input[name="id"]:checked').each(function(){
  336.     id_array.push($(this).val());//向数组中添加元素
  337. });
  338. var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符串
  339. alert(idstr);
  340.  
  341. JQuery获取iframe对象
  342. $(window.frames["frame1"].document); //获取iframe对象
  343. //例如
  344. $(window.frames["xxxxx"].document).find('#xxx').val();
  345.  
  346. JS产生一段随机字符串
  347. function(size) randomString {
  348.     size = size || 6;
  349.     var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 62个字符
  350.         maxNum = chars.length,
  351.         ret = '';
  352.     while (size > 0) {
  353.         ret += chars.charAt(Math.floor(Math.random() * maxNum));
  354.         size--;
  355.     }
  356.     return ret;
  357. }
  358.  
  359. JS页面跳转
  360. onClick="location.href='http://www.ddhbb.com/'"
  361.  
  362. JS确认对话框
  363. javascript:drop_confirm('你确定要结束活动吗，结束后不可再开启本活动!', 'http://baidu.com');
  364. if(confirm("确认要将用户移动到分组"+group+"?")){
  365.     }else{
  366.       event.returnValue = false;
  367.     }
  368.  
  369. JS把php输出的时间戳转换为日期（解决出现NaN的问题）
  370. var s = '1379934802'; //php time()函数输出的时间戳
  371. var d = new Date(parseInt(s) * 1000); //必须乘以1000，否则出现NaN
  372. var dateStr = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
  373. alert(dateStr);
  374.  
  375. JS控制各行换色
  376. $('div:odd').css("background-color", "#F4F4F8");
  377. $('div:even').css("background-color", "#EFF1F1");
  378.  
  379. JS网页打印内容
  380. javascript:window.print();
  381.  
  382. Jquery 获取一组checkbox元素 并获取选中的个数
  383. var items =  $("input[name='check']:checked");  //获取name为check的一组元素,然后选取它们中选中(checked)的。
  384. alert( "选中的个数为："+items.length  );
  385. <input type="checkbox" value="1" name="check" checked/>
  386. <input type="checkbox" value="2" name="check" />
  387. <input type="checkbox" value="3" name="check" checked/>
  388.  
  389. JS实现表格隔行背景色加深
  390. <script type="text/javascript">
  391. window.onload = function(){ //页面所有元素加载完毕
  392.     var item  =  document.getElementById("tb");         //获取id为tb的元素(table)
  393.     var tbody =  item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
  394.     var trs =   tbody.getElementsByTagName("tr");           //获取tbody元素下的所有tr元素
  395.     for(var i=0;i < trs.length;i++){//循环tr元素
  396.         if(i%2==0){        //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
  397.             trs[i].style.backgroundColor = "#AAA"; // 改变 符合条件的tr元素 的背景色.
  398.         }
  399.     }
  400. }
  401. </script>
  402.  
  403. jQuery无刷新访问ajax post方法
  404. $.post("test.php", { "func": "getNameAndTime" },
  405.    function(data){
  406.      alert(data.name);
  407.      alert(data.time);
  408.    }, "json");
  409.  
  410. jQuery无刷新访问ajax get方法
  411. $.get("test.jsp", { name: "John", time: "2pm" },
  412.   function(data){
  413.     alert("Data Loaded: " + data);
  414.   });
  415.  
  416.  

回复 "js常用汇总"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666