Jquery实战

自动创建标签（博客发表原理）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        .my{width: 200px; height: 200px; float: left; margin-left: 100px;
            background-color: #795548; margin-top:150px;}
    </style>
</head>
<body>
<div id="add">
</div>
<script type="text/javascript" src="textJs.js"></script>
</body>
</html>

function Date(src,title,price,litprice) {
    this.src=src;
    this.title=title;
    this.price=price;
    this.litprice=litprice;
}
var allDate=[
    new Date("a.jpg","水果蛋糕",200,20),//模拟数据库数据
    new Date("a.jpg","水果蛋糕",200,20),
    new Date("a.jpg","水果蛋糕",200,20),
    new Date("a.jpg","水果蛋糕",200,20),
    new Date("a.jpg","水果蛋糕",200,20),
    new Date("a.jpg","水果蛋糕",200,20),
    new Date("a.jpg","水果蛋糕",200,20),
    new Date("a.jpg","水果蛋糕",200,20),
];
function $(id) {
    return document.getElementById(id);//获取父容器方法
}
for(var i=0;i<allDate.length;i++)//动态创建html对象
{
    //console.log(allDate.price);
    var element=document.createElement("DIV");//HTML标签大小写都可以
    //element.innerHTML=allDate[i].price;
    element.className="my";//为动态创建的DIV创建类选择器准备定义样式
    //考虑多种选择器
    var picture = document.createElement("img");
    picture.style.width="200px";
    picture.style.height="200px";
    element.appendChild(picture);
    picture.src=allDate[i].src;
    var title = document.createElement("p");
    title.innerHTML=allDate[i].title;
    //prTitle.innerHTML=allDate[i].price;
    title.style.textAlign="center";
    title.style.color="blue";
    element.appendChild(title);
    var prTitle = document.createElement("p");
    prTitle.innerHTML=allDate[i].price+"&nbsp"+"&nbsp"+"&nbsp"+allDate[i].litprice;
    prTitle.style.textAlign="center";
    element.appendChild(prTitle);
    //element.style.width="100px";
    //element.style.height="100px";
    //element.style.backgroundColor="red";
    $("add").appendChild(element);
}
//扩展使用这种方法可以创建博客的发表文章功能

elect获取选中的值和根据option的值获取option的位置

1获取select选择的值
$("#department2 option:selected").val();
2根据值获得选中option的位置
$('select option[value="'+dep1+'"]').index ();

js jquery select 操作获取值,选中选项,增加,修改,删除

select示例:

<select id="sel">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

js操作

var objSelect = document.getElementById("sel");

一,获取

// 1.获取选中项的value
console.log(objSelect.value);
// 2.获取选中项的index
console.log(objSelect.selectedIndex);
// 3.获取选中项的text
console.log(objSelect.options[objSelect.selectedIndex].text);
// 4.获取选项数量
console.log(objSelect.options.length);

二,选中

// 1.选中某个value的选项
objSelect.value = 2;
// 2.选中某个index的选项
objSelect.options[1].selected = true;

三,增加

// 1.在最后加入选项objSelect.options.add(new Option("three", "3"));

四,修改

// 四,修改
// objSelect.options[i] 获取index为i的元素选项
// 1.修改选中项的value和text
objSelect.options[objSelect.selectedIndex] = new Option("four", "4");
// 2.修改选中项的value
objSelect.options[objSelect.selectedIndex].value = "new1";
// 3.修改选中项的text
objSelect.options[objSelect.selectedIndex].text = "new-one";

五,删除

// 两种删除方式
//objSelect.options[i] = null; // i为index
//objSelect.options.remove(i);
// 1.删除选中项
objSelect.options.remove(objSelect.selectedIndex);
// 2.删除所有项
objSelect.options.length = 0;

jquery操作

var $select = $("#sel");

一,获取

// 1.获取选中项的value
console.log($select.val());
// 2.获取选中项的index
console.log($select.get(0).selectedIndex);
// 3.获取选中项的text
console.log($select.find("option:selected").text()); // 不推荐
// 4.获取选项数量
console.log($select.find("option").length);
// 5.获取选项最大的index属性值
console.log($select.find("option:last").get(0).index); //不推荐

二,选中

// 1.选中某个value的选项
$select.val(2);
// 2.选中某个index的选项
$select.get(0).selectedIndex = 1;
// 3.选中某个text的选项
$select.find("option:contains('two')").attr("selected", true); // .attr("selected", "selected")也可以
//$select.find("option[text='two']").attr("selected", "selected"); //× 这种写法是错误的

三,增加

// 1.在最后加入选项
$select.append("<option value='3'>three</option>");
// 2.在最前加入选项
$select.prepend("<option value='0'>zero</option>");

四,修改

// $select.find("option").get(i) // 获取index为i的元素选项
// 1.修改选中项的value
$select.find("option").get(0).value =  "new1";
// 2.修改选中项的text
$select.find("option").get(0).text =  "new-one";

五,删除

//$select.find("option").get(i).remove() // i为index
// 1.删除选中项
$select.find("option").get(0).remove();    // index为0是选中项
objSelect.options.remove(objSelect.selectedIndex);
// 2.删除所有项
$select.find("option").remove();
// 3.删除第一项,最后一项
$select.find("option:first").remove();
$select.find("option:last").remove();
// 4.删除某value的项
$select.find("option[value=1]").remove();

自动创建标签（博客发表原理）

elect获取选中的值和根据option的值获取option的位置

猜你喜欢