html js jquery 前端笔记

最新推荐文章于 2021-08-04 12:48:34 发布

zj420964597

最新推荐文章于 2021-08-04 12:48:34 发布

阅读量277

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/zj420964597/article/details/79670983

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

动态添加div

$('').append('<div></div>')

ajax实现搜索功能

<inputid='search'></input>

$("#search").keyup(function(){
.ajax({
url: '......',
data: datas,
type: 'POST',
dataType: 'json',
success: function (data) {
//搜索后处理的数据
},
});
});

在某个div后动态添加div

$('').after('<div>新的div</div>')

jQuery怎么根据某个特定的值动态让select下的option选中

$("#select").val(1); //就可以让下拉框为1的值选中。

Js实现Select动态添加option

$.ajax({
        type:'post',
        url:BASE_PATH+"/sys/game",
        success:function (data) {
       for (var i=0; i<data.length; i++){
      document.getElementById('select_game_name').options.add(newOption(data[i].name))
            }
        }
    })
});

jQuery实现Select动态添加option${‘#_select’}.append('<option value="' + v.id + '">'+ v.name + '</option>');

设置placeHolder

$("textarea[name='model.username']").attr("placeholder","抄送人以分号结尾");

让div水平排列方法：

1. 给div加入属性style="float:left"(横向无缝排列)

2.给div加入属性style="display:inline-block"

比如：

<style>

.divide-equally {

display:inline-block;

}

</style>

3.通过width属性分布百分比

<style>

.divide-equally {

width:20%;

}

</style>

如何添加分隔符

采用<hr />。

<style>

hr.style-two {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(toright, #ccc, #333, #ccc);
}

</style>

点击文字选中checkbox复选框 checkbox绑定文字

实现的代码如下：第一种方法：文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同。

实现代码如下：

<br>

第二种方法：把文字和checkbox包含在<label>标签内

代码如下：

全部代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

* {margin:0;padding:0; list-style: none;font-family: '微软雅黑'}

.box {width: 400px; overflow: hidden; padding: 20px;}

input,label{vertical-align:middle;}

.check {width: 18px; height: 18px;}

label{font-size: 18px;}

</style>

</head>

<body>

<div>

<form>

<br>

<br>

</form>

</div>

</body>

</html>

Jquery例子

1.$("textarea[name='model.username']").attr("placeholder","抄送人以分号结尾");

2.$("select[ name='model.recordtype']").val(‘赋值’);

3.alert($(v).parent().parent().find("td:eq(1)").text());
4.alert($(v).parent().parent().find("td:eq(4)").children().val());

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有id="test" 的元素

$("#test").text()

$("#test").html() ：jquery获取a标签的值 <a href="#">这是a的值</a>

$("#test").val()

$(".font").eq(0).text("dd");

给<input type=”date” />赋值（或后端赋值给前端input）

赋值的格式为：2018-04-26（中间用横线连接）

SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");

Jquery遍历table

1. $("#table_id tbody tr").each(function(){

var a = $(this).children();//获取每一行

var arr=a[2].innerText;//取得第三列的值

　　　　　　　if(arr......比较)

a[1].firstElementChild.setAttribute("checked","checked");

//给第二列添加一个属性checked

});

table_id是table的id，接着tbogy tr是为了更进一步找到这元件。

2.      $("#jar-model-result-table tbodytr").each(function(){
    var b= $(this).find(".region").text();
    if (b == ""){
        $(this).find(".split").attr("class","pink2");
    }
});

Jquery判断复选框是否被选中

var isChecked = $('#cb').prop('checked');
//或
var isChecked = $('#cb').is(":checked");

******************************************************************************

checkbox全选效果未整理：

autocomplete="off" id="check_all_game"/>
<label class="lbl">全选</label>
</div>

<div class="items col-xs-4 condition">
    <div class="ace-settings-item">
        <input type="text" class="gameId" value="${game.id}" style="display: none;">
        <input type="checkbox" class="ace ace-checkbox-2 isnot" ${_isChecked} autocomplete="off" />
        <label class="lbl">${game.name}</label>
    </div>
</div>

$("#check_all_game").change(function() {
    if($("#check_all_game").is(":checked") == true){
        $(".condition").each(function () {
                $(this).find(".isnot").prop("checked", true);
            });
    }else {
        $(".condition").each(function () {
            $(this).find(".isnot").prop("checked", false);
        });
    }
});