checked js 獲取值_js和css基礎知識總結
阿新 • • 發佈:2021-01-06
技術標籤:checked js 獲取值
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
來源:掘金