關于js的一些常用小知識點

• 1、獲取頁面中所有選中的CheckBox復選框的值
• • 2、js獲取網頁URL中所帶的參數
  • 3、js模擬點擊button
  • 4、前端傳入后臺list，后臺是不能接收List的，就需要傳的時候轉化一下，把list轉成String，后臺用一個String型接收就可以了
  • 5、監聽CheckBox
  • 6、獲取radio的值
  • 7、document.querySelectorAll（）一些用法
  • 8、hasClass，addClass，classList.remove()，classList.add()

1、獲取頁面中所有選中的CheckBox復選框的值

var obj = document.getElementsByName("checkbox1"); var check_val = ""; for (var i = 0; i < obj.length; i++) {if (obj[i].checked) {check_val = obj[i].value + ',' + check_val;} } console.info(check_val);

2、js獲取網頁URL中所帶的參數

如：http://127.0.0.1:1110/move-check/ms/lookScoreSum.html?projectId=5c307e118b88988&leader=2
我們的這個路徑帶了我們需要的參數，projectId 和leader

var projectId = getQueryString("projectId"); var leader= getQueryString("leader");

3、js模擬點擊button

document.getElementById(id).click();

4、前端傳入后臺list，后臺是不能接收List的，就需要傳的時候轉化一下，把list轉成String，后臺用一個String型接收就可以了

http({data: {contentList:JSON.stringify(contentList)},url: '',type: 'post',dataType: 'json',async: true,success: function(data) {} })

5、監聽CheckBox

//監聽CheckBox $(document).on('change',"#checkbox2",function(){if ($(this).is(':checked')) {//這里寫選中的時候，我們需要做什么}else{//這里寫取消選中的時候，我們需要做什么} })

6、獲取radio的值

var value= $("input[name='radio1']:checked").val(); //下面這個是獲取這個radio中藏的其他值，因為有時候一個值不夠用 var institutionsId = $("input[name='radio1']:checked").attr("data_institutionsId"); //HTML是這樣的,這里說一下，：data-data_institutionsId 的用法是vue的用法 <input name="radio1" type="radio" :data_institutionsId="expert.institutionsId" :value="expert.id">

7、document.querySelectorAll（）一些用法

//這個方法返回的是NodeList 對象。// 獲取文檔中所有的 <p> 元素 var x = document.querySelectorAll("p"); // 獲取文檔中所有 class="example" 的 <p> 元素 var x = document.querySelectorAll("p.example"); // 設置 class="example" 的第一個 <p> 元素的背景顏色 x[0].style.backgroundColor = "red";// 獲取文檔中 class="example" 的所有元素 var x = document.querySelectorAll(".example");// 獲取文檔中 id="example" 的所有元素 var x = document.querySelectorAll("#example")// 獲取頁面中所有的Checkbox節點 var x= document.querySelectorAll("[type=checkbox]");// 獲取頁面中id為thisOne下面所有的Checkbox節點 var x= document.querySelectorAll("#thisOne [type=checkbox]");//計算文檔中 class="example" 的元素的數量（使用 NodeList 對象的 length 屬性）: var x = document.querySelectorAll(".example").length;//查找文檔中共包含 "target" 屬性的 <a> 標簽 var x = document.querySelectorAll("a[target]");//給文檔中所有的 <h2>, <div> 和 <span> 元素設置背景顏色 var x = document.querySelectorAll("h2, div, span");

8、hasClass，addClass，classList.remove()，classList.add()

//hasClass用來判斷某個元素是否含有某個 class樣式 //檢查第一個 <p> 元素是否包含 "intro" 類 $("p:first").hasClass("intro") //舉例，找到頁面中所有class名字為expCheck的元素，然后循環這些元素， //判斷如果當前元素含有layui-form-checked這個class就做一些操作 var list= document.getElementsByClassName('expCheck'); for (var i = 0; i < brr.length; i++) {if ($(list[i]).hasClass("layui-form-checked")) {//寫你要做的操作//我這里是給他添加abc 這個class$(list[i]).addClass("abc");//還可以這樣寫，這個是添加$(list[i]).classList.add("abc");//這個是刪除$(list[i]).classList.remove("abc");} }

暫時就寫這么多，持續更新，寫這個就是防止以后忘記，導致每次都要去搜

總結

以上是生活随笔為你收集整理的关于js的一些常用小知识点（持续更新）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。