1. 程式人生 > 其它 >checked js 獲取值_js和css基礎知識總結

checked js 獲取值_js和css基礎知識總結

技術標籤:checked js 獲取值

4726f66bb26bc6d620099d7fcd42ec9d.png

1.em字型設定

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

2.背景圖示居右

.aa{
    background-image: url(arrow.png)no-repeat right center;
    background-image:url(nav-bar.jpg);
    background-repeat:no-repeat;
    background-position:right center;
}

3.文字框超出部分顯示省略號:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;    

一蒙版出現禁止頁面滾動

1 window.onscroll=function(){
    document.body.scrollTop = 0
};

2 $('html,body').animate({scrollTop:'0'},100);
$(".tan").bind('touchmove',function(e){  //禁止彈出框出來時進行滑動 
    e.preventDefault();
});
3 document.body.style.overflow='hidden';
若鍵盤點選的話,就要加上:
var move=function(e){
    e.preventDefault && e.preventDefault();
    e.returnValue=false;
    e.stopPropagation && e.stopPropagation();
    return false;
}
var keyFunc=function(e){
    if(37<=e.keyCode && e.keyCode<=40){
        return move(e);
    }
}
document.body.onkeydown=keyFunc;

二、按鈕點選事件

var button=$(':button');
button.on('click',function(){
    button.css('background-color','white');
    $(this).css('background-color','#FB3336');
})

三、安卓手機裡,h5頁面沒有充滿body導致左右滑動的問題

首先宣告一下:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
然後
html,body {width:100%;height:100%;overflow-x:hidden;}

四、關於頁面左右滾動的問題

1.<body scoll=no> 全禁止
2.<body style="overflow:scroll;overflow-y:hidden"> 禁止縱向滾動條
3.<body style="overflow:scroll;overflow-x:hidden"> 禁止縱向滾動條
4.overflow屬性: 檢索或設定當物件的內容超過其指定高度及寬度時如何顯示內容
5.overflow: auto; 在需要時內容會自動新增滾動條
6.overflow: scroll; 總是顯示滾動條
7.overflow-x: hidden; 禁止橫向的滾動條
8.overflow-y: scroll; 總是顯示縱向滾動條

五、 content && header之間的亮條怎麼消除

.mui-bar-nav{
    -webkit-box-shadow: none;
    box-shadow: none;
}

六、刪除選項

$(".shanchu").click(function(){
    $(this).parent().remove()
})

七、表單提交按鈕時,滑鼠放在上面顯示小手的方法:

需要對元素屬性的css的cursor進行設定
1、default    預設游標(通常是一個箭頭)
2、auto   預設。瀏覽器設定的游標。 
3、crosshair   游標呈現為十字線。    
4、pointer    游標呈現為指示連結的指標(一隻手)    
5、move    此游標指示某物件可被移動。    
6、e-resize    此游標指示矩形框的邊緣可被向右(東)移動。    
7、ne-resize    此游標指示矩形框的邊緣可被向上及向右移動(北/東)。    
8、nw-resize    此游標指示矩形框的邊緣可被向上及向左移動(北/西)。    
9、n-resize    此游標指示矩形框的邊緣可被向上(北)移動。    
10、se-resize    此游標指示矩形框的邊緣可被向下及向右移動(南/東)。    
11、sw-resize    此游標指示矩形框的邊緣可被向下及向左移動(南/西)。  
12、s-resize    此游標指示矩形框的邊緣可被向下移動(南)。    
13、w-resize    此游標指示矩形框的邊緣可被向左移動(西)。    
14、text    此游標指示文字。    
15、wait    此游標指示程式正忙(通常是一隻表或沙漏)。    
16、help    此游標指示可用的幫助(通常是一個問號或一個氣球)。    
要實現滑鼠移上去顯示手形、需要在你的提交按鈕上增加css cursor屬性,並將它的值設定為pointer;
如下:<input type="submit" name="submit" value="釋出留言" class="subimt" onclick="display_alert()" style="cursor:pointer" />

八、怎麼清除table裡面tbody的內容

$("#test tbody").html("");

九、動態獲取表格的行數

var bv=$("#tabd tr").length-1;
$("#sp4").html(bv);     //動態的獲取注數

十、多個按鈕點選變色,再點選還原

$(".jixuan  input[type=button]").toggle(function(){
    $(this).css("background-color","yellow");
    $(this).css("cursor","pointer")
    },function(){
    $(this).css("background-color","white");
    $(this).css("cursor","pointer");
}) 

十一、單選按鈕顧名思義用於單選的場合,例如,性別,職業的選擇等,語法如下:

<input type="radio" name="gender" value="男" checked />
常用屬性迅美科技整理如下:
1.type="radio"
type屬性設定為radio,表示產生單一選擇的按鈕,讓使用者單擊選擇;
2.name="gender"
radio元件的名稱,name屬性值相同的radio元件會視為同一組radio元件,而同一組內只能有一個radio元件被選擇;
3.value="男"
radio元件的值,當表單被提交時,已選擇的radio元件的value值,就會被髮送進行下一步處理, radio元件的value屬性設定的值 
無法從外觀上看出,所以必須在radio元件旁邊新增文字,此處的文字只是讓使用者瞭解此元件的意思.
4.checked
設定radio元件為已選擇,同一組radio元件的name性情值必須要相同

十二、網頁中,公共頭部和側邊欄的引用

1、<?php include("header.html");?>
2、使用ssi技術頁面生成shtml檔案,只用在頭部檔案位置加入<!--#include file="header.htm" -->,
然後修改的時候只要修改header.htm檔案就可以了。使用shtml的好處是對搜尋引擎比較友好,需要處理的檔案在伺服器端完成的,
不會加重訪問者的瀏覽器負擔。

十三、錨點連結上下定位偏移解決

1、JS解決的方法

if (window.location.hash.indexOf('#') >= 0) {
    $('html,body').animate({
    scrollTop: ($(window.location.hash).offset().top - 50) + "px"
    },
    300);
}; //主要修復評論定位不準確BUG
$('#comments a[href^=#][href!=#]').click(function() {
    var target = document.getElementById(this.hash.slice(1));
    if (!target) return;
    var targetOffset = $(target).offset().top - 50;
    $('html,body').animate({
        scrollTop: targetOffset
    },
    300);
    return false;
}); //主要修復評論定位不準確BUG

2、解決辦法

能用css自然不想用js解決,因為在載入方面,css總是先載入,並且速度很快。

typecho的評論HTML結構是這樣的:

<li id="comment-277" class="comment-body comment-child comment-level-odd comment-even comment-by-author">
我們給comment-body加上css

.comment-body {
    position: relative;
    padding-top: 50px;
    margin-top: -50px;
}
/*修復評論跳轉定位問題*/
完美相容chrome和Firefox,其他瀏覽器未測試。

十四、蒙版彈出禁止蒙版後面的內容滾動

.ovfHiden{overflow: hidden;height: 100%;}
$('.bzh .l1 a').click(function(){
    $(".baok").show();
    $(".baod").show();
    $('html,body').addClass('ovfHiden');
});
$('.baod .img1').click(function(){
$('html,body').removeClass('ovfHiden');
    $(".baok").hide();
    $(".baod").hide();
});

十五、獲取複選框點選的次數

$("#compute").click(function(){
    $('input').live('click',function(){ 
    //alert($('input:checked').length); 
    $("#show").html($('input:checked').length);
    });
});

十六、Tab選項卡切換

1.js

$('footer ul li').click(function(){
    var index = $(this).index();
    $(this).attr('class',"content").siblings('ul li').attr('class','ss');
    $('.content').eq(index).show(200).siblings('.content').hide();
    });

$('.ka ul li').click(function(){
    var index = $(this).index();
    $(this).attr('class',"zi").siblings('ul li').attr('class','ll');
    $(this).parent().next().find(".zi").hide(). eq(index).show();
});

2.html

<div class="carindex-cnt">
        <ul class="nav">
            <li>續保方案</li>
            <li>熱銷方案</li>
            <li>自定義方案</li>
        </ul>
        <div class="tabcontent">
            <div class="zi">
                <p class="altp">此方案為您上一年的投保記錄</p>
                <ul class="xiur">
                    <li>
                        <label for="saveType2">交強險</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <label for="saveType2">商業險</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <p class="title">商業主險</p>
                <ul class="xiur">
                    <li>
                        <span>車輛損失險</span>
                        <label for="abatement0" class="labels">
                            <input class="mui-checkbox checkbox-green" type="checkbox" name="abatement" >
                        </label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                  
                </ul>
            </div>
            <div class="zi" style="display: none">
                <ul class="xiur">
                    <li>
                        <label for="saveType2">交強險</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <label for="saveType2">商業險</label>
                        <div  class="right-cnt">
                            <input type="text" class="coverage" disabled="disabled" value="不投保"/>
                            <ul class="datas" style="display: none;">
                                <li ref="1">投保</li>
                                <li ref="2">不投保</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
</div>  

3.js

$('.nav li').click(function () {
    var index = $(this).index();
    $(this).parent().next().find(".zi").hide().eq(index).show();
})

十七、form表為空時,提交按鈕禁用

$(function(){            
    $('.main button').click(function(){
        if(($('.ip1').val() !="") && ($('.ip2').val() !="")){
            $('.main button').css('background','#ff8100');
            $('.main button').attr('disabled', true);
            }else{
            $('.main button').css('background','#D0D0D0');
            $('.main button').attr('disabled', false);
        }
    })
})

十八、上拉事件和下拉事件

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();               //滾動條距離頂部的高度
    var scrollHeight =$(document).height();                   //當前頁面的總高度
    var windowHeight = $(this).height();                   //當前可視的頁面高度
    if(scrollTop + windowHeight >= scrollHeight){    //距離頂部+當前高度 >=文件總高度 即代表滑動到底部
        alert("上拉載入,要在這呼叫啥方法?");
    }else if(scrollTop<=0){         //滾動條距離頂部的高度小於等於0
        alert("下拉重新整理,要在這呼叫啥方法?");
    }
});                                                          ——>移動端

$(function(){    
    $(window).scroll(function() {  
        var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();  
        var positionValue = (scrollTop + windowHeight) - scrollHeight;  
        if (positionValue == 0) {  
            //do something  
        }  
    });  
});  

十九、左滑和右滑事件

var obj;
var startx;
var starty;
var overx;
var overy;
    for(var i=1;i<=$("li").length;i++){          //為每個li標籤新增事件
    obj = document.getElementById(i);       //獲取this元素
    evenlistener(obj);      //呼叫evenlistener函式並將dom元素傳入,為該元素繫結事件
}

function evenlistener(obj){
    obj.addEventListener('touchstart', function(event) {        //touchstart事件,當滑鼠點選螢幕時觸發
    startx = event.touches[0].clientX;              //獲取當前點選位置x座標
    starty = event.touches[0].clientY;              //獲取當前點選位置y座標
    $(".sdf").text("x:"+startx+",y:"+starty+"")     //賦值到頁面顯示
    } , false);         //false引數,設定事件處理機制的優先順序,具體不多說,true優先false
    obj.addEventListener('touchmove', function(event) {         //touchmove事件,當滑鼠在螢幕移動時觸發
    overx = event.touches[0].clientX;           //獲取當前點選位置x座標
    overy = event.touches[0].clientY;           //獲取當前點選位置y座標
    var $this = $(this);            //將dom物件轉化為jq物件,由於專案用到jquery,直接使用其animate方法

    if(startx-overx>10){         //左滑動判斷,當左滑動的距離大於開始的距離10進入
    $($this).animate({marginLeft:"-55px"},150);         //實現左滑動效果
    }else if(overx-startx>10){       //右滑動判斷,當右滑動的距離大於開始的距離10進入
    $($this).animate({marginLeft:"0px"},150);           //恢復
    }
} , false);
    obj.addEventListener('touchend', function(event) {          //touchend事件,當滑鼠離開螢幕時觸發,專案中無用到,舉例
    $(".sf").text("x:"+overx+",y:"+overy+"")
    } , false);
}

二十、各大瀏覽器的判斷

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/rv:([d.]+)) like gecko/)) ? Sys.ie = s[1] :
(s = ua.match(/msie ([d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox/([d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome/([d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version/([d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie){
    $("*").css({fontFamily:"微軟雅黑"});
};
if (window.ActiveXObject){
Sys.ie = ua.match(/msie ([d.]+)/)[1];
if (Sys.ie<=9){
    alert('你目前的IE版本為'+Sys.ie+'版本太低,請升級!');
    location.href="http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie";
    }
}
var UA=navigator.userAgent;
if(is360se = UA.toLowerCase().indexOf('360se')>-1 ){

}else{
    $("*").css({fontFamily:"微軟雅黑"});
}

360瀏覽器基於IE核心的,360急速瀏覽器核心基於谷歌的

二十一、form表單中點選button按鈕重新整理問題

button,input type=button按鈕在IE和w3c,firefox瀏覽器區別: 
1、當在IE瀏覽器下面時,button標籤按鈕,input標籤type屬性為button的按鈕是一樣的功能,不會對錶單進行任何操作。 
2、但是在W3C瀏覽器,如Firefox下就需要注意了,button標籤按鈕會提交表單,而input標籤type屬性為button不會對錶單進行任何操作。
為button按鈕增加一個type=”button”屬性。

二十二、textrare文字輸入提示:

<textarea name="" id="sign" maxlength=30 onKeyUp="keypress1()"></textarea>
<div class="tish">
<span id="number">0</span><span>/30</span>
</div>

function keypress1() //text輸入長度處理 
{ 
    var text1=document.getElementById("sign").value; 
    var len=text1.length; 
    var show=len; 
    document.getElementById("number").innerText=show; 
} 

二十三、iframe操作

1:父頁面操作iframe子頁面

$('#ifrme').load(function(){
$('#ifrme').contents().find('.baod .img1').click(function(){
    $(.ifrme').contents().find('.baod').hide();
    $('.baok',window.parent.document).hide();
    $('html,body',window.parent.document).removeClass('ovfHiden');
    });
})
* .ifrme父頁面的ID為iframe的父級
    .baod .img1是iframe頁面裡的元素

2:子頁面操作父頁面

$('.baod .bt1').click(function(){
    $('.baod').hide();
    $('.edit',window.parent.document).hide();
    $(".baok", window.parent.document).hide(); 
    $('html,body',window.parent.document).removeClass('ovfHiden');
});
*.baod .bt1子頁面裡的元素
window.parent.document父級視窗
.edit父級頁面元素

二十四、toggle開關切換圖示或是元素的隱藏

$('.other .pg').click(function(){
    $(this).toggleClass ("pots");
    $('.below').slideToggle(300);
})

* .other .pg元素名稱
pots 點選元素要切換的圖示(以background()形式的圖示)
.below要進行toggle的內容

二十五、彈框居中

$(".btnDel").click(function() {  
//$(".box-mask").css({"display":"block"});  
    $(".box-mask").fadeIn(500);  
    center($(".box"));  
    //載入彈出視窗上的按鈕事件  
    checkEvent($(this).parent(),            $(".btnSure"), $(".btnCancel"));  
});  *center  彈框名稱

function center(obj) {  
    //obj這個引數是彈出框的整個物件  
    var screenWidth = $(window).width(), screenHeigth = $(window).height();  
    //獲取螢幕寬高  
    var scollTop = $(document).scrollTop();  
    //當前視窗距離頁面頂部的距離  
    var objLeft = (screenWidth - obj.width()) / 2;  
    ///彈出框距離左側距離  
    var objTop = (screenHeigth - obj.height()) / 2 + scollTop;  
    ///彈出框距離頂部的距離  
    obj.css({  
        left:objLeft + "px",  
        top:objTop + "px"  
    });  
    obj.fadeIn(500);  
    //彈出框淡入  
    isOpen = 1;  
    //彈出框開啟後這個變數置1 說明彈出框是開啟裝填  
    //當視窗大小發生改變時  
    $(window).resize(function() {  
        //只有isOpen狀態下才執行  
        if (isOpen == 1) {  
            //重新獲取資料  
            screenWidth = $(window).width();  
            screenHeigth = $(window).height();  
            var scollTop = $(document).scrollTop();  
            objLeft = (screenWidth - obj.width()) / 2;  
            var objTop = (screenHeigth - obj.height()) / 2 + scollTop;  
            obj.css({  
                left:objLeft + "px",  
                top:objTop + "px"  
            });  
            obj.fadeIn(500);  
        }  
});  
    //當滾動條發生改變的時候  
$(window).scroll(function() {  
    if (isOpen == 1) {  
        //重新獲取資料  
        screenWidth = $(window).width();  
        screenHeigth = $(window).height();  
        var scollTop = $(document).scrollTop();  
        objLeft = (screenWidth - obj.width()) / 2;  
        var objTop = (screenHeigth - obj.height()) / 2 + scollTop;  
        obj.css({  
            left:objLeft + "px",  
            top:objTop + "px"  
        });  
        obj.fadeIn(500);  
    }  
});  

二十六、css和js進行奇偶選擇器

css

:nth-child(odd){background-color:#FFE4C4;}奇數行
:nth-child(even){background-color:#F0F0F0;}偶數行

js

$("table  tr:nth-child(even)").css("background-color","#FFE4C4");    //設定偶數行的背景色
$("table  tr:nth-child(odd)").css("background-color","#F0F0F0");    //設定奇數行的背景色

二十七、jQuery中live()使用報錯,TypeError: $(...).live is not a function

jquery中的live()方法在jquery1.9及以上的版本中已被廢棄了,如果使用,會丟擲TypeError: $(...).live is not a function錯誤。

解決方法:

之前的用法:

.live(events, function)  

新方法:

.on(eventType, selector, function)

若selector不需要,可傳入null


例子1:

之前:

$('#mainmenu a').live('click', function)

之後:

$('#mainmenu').on('click', 'a', function)


例子2:

之前:

$('.myButton').live('click', function)

之後(應使用距離myButton最近的節點):

$('#parentElement').on('click', ‘.myButton’, function)

若不知最近的節點,可使用如下的方法:

$('body').on('click', ‘.myButton’, function)

二十八、iframe滾動條問題

iframe嵌入的滾動條可以用iframe裡面頁面的大小覆蓋掉iframe的滾動條

二十九、點選圖片下載(不用新視窗開啟)

<a class="downs"  style="display:'+display+'" onclick="downimg(''+list[i].skuTieTu+'')">下載</a>

js方法

/**
* 圖片單獨下載
*/
function downimg(skuTieTu){
    console.log(skuTieTu)
    let src = skuTieTu;
    var canvas = document.createElement('canvas');
    var img = document.createElement('img');
    img.onload = function(e) {
    canvas.width = img.width;
    canvas.height = img.height;
    var context = canvas.getContext('2d');
    context.drawImage(img, 0, 0, img.width, img.height);
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    canvas.toBlob((blob)=>{
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = 'zzsp'; 
        link.click();  
    }, "image/jpeg");
}
img.setAttribute("crossOrigin",'Anonymous');
img.src = src;

三十、ajax裡面條件判斷

$.ajax({
    type: "post",
    data: 
    contentType:
    url: 
    beforeSend: function () {
        if(){
        
        }else{
        
        };
    },
    success: function (data) {
        alert("儲存失敗");
    },
    error: function (data) {
        alert("儲存成功");
    }
});

三十一、ajax裡面在資料請求之前加layui.load()時,請求狀態必須是非同步的才行( async: true)

$.ajax({
    type:"post",
    url: API,
    data: {
        'a':'project.kujiale.plan.YongliaoUser'
    },
    dataType: "json",
    async: true,
    beforeSend: function () {
        layer.load(1);
    },
    success: function(data) {   
        var item =data.data;
        list = item
        if(data.code==0){
            layer.closeAll();
            var url = '/module/designplan/searchplan/searchlist.jsp';
            layer.open({
            type: 2,
            title: "搜尋方案",
            shadeClose: true,
            shade: 0.8,
            area: ['700px','500px'],
            content: [url]
            });
        }else{
            layer.msg(data.msg);
        }
    }
});

三十二、js根據元素的屬性獲取到改元素其他屬性的值

jquery
$("a[id=search]").attr("data-search")

原生js
document.querySelector("a[id=search]").getAttribute("data-search") //根據當前元素的屬性獲取該元素其他屬性的值

document.querySelector("a[id=search]").text //根據當前屬性獲取該元素的值
document.querySelector("a[id=search]").innerText //根據當前屬性獲取該元素的值    

三十三、陣列物件提交時轉化問題

JSON.stringify(userList)

三十四、layui使用

1、關閉彈窗

layer.msg('分配成功',{time: 1000},function () {
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);
})

2、關閉彈窗,重新整理頁面

window.location.reload();//重新整理當前頁面
window.parent.location.reload();//重新整理父級頁面

三十五、js建立下載方式

download(data.data);

function downpdf(data){
    var link = document.createElement('a');
    link.href = data;
    link.target = '_blank';
    link.click();
    delete link;
}

三十六、高階函式

const isYoung = age => age < 25;

const message = msg => "He is "+ msg;

function isPersonOld(age, isYoung, message) {
    const returnMessage = isYoung(age)?message("young"):message("old");
    return returnMessage;
}

// passing functions as an arguments
    console.log(isPersonOld(13,isYoung,message))
// He is young

遞迴

遞迴是一種函式在滿足一定條件之前呼叫自身的技術。只要可能,最好使用遞迴而不是迴圈。你必須注意這一點,瀏覽器不能處理太多遞迴和丟擲錯誤。
下面是一個演示遞迴的例子,在這個遞迴中,列印一個類似於樓梯的名稱。我們也可以使用for迴圈,但只要可能,我們更喜歡遞迴。
function printMyName(name, count) {
    if(count <= name.length) {
        console.log(name.substring(0,count));
        printMyName(name, ++count);
    }
}

console.log(printMyName("Bhargav", 1));

/*
    B
    Bh
    Bha
    Bhar
    Bharg
    Bharga
    Bhargav
*/

// withotu recursion
var name = "Bhargav"
var output = "";
for(let i=0; i<name.length; i++) {
    output = output + name[i];
    console.log(output);
}
作者:山水有輕音
連結: https:// juejin.im/post/68730038 14065012750
來源:掘金