火速上手jQuery

背景

  近来在做视频生产相关的工作。工作上的需要,以往的Java技能只能搁置一边,开始捣鼓WebGL、JavaScript等前端技术栈。最近刚好有需求,要自己搭建一个视频生产的工具后台~~

demo长成这样子的

demo html

<dl class="sgw_img">

    <dt class=" sgw_img2">

        <div class="fileClassDiv" data-index="0" data-text="">+</div>

        <input class="fileClassInput" type="file" />


        <div class="box">
            <button class="button button5 updateClassBtn">更换</button>
            </br>
            <button class="button button5 deleteClassBtn">删除</button>
        </div>
    </dt>
    <div>
        转 场 ：
        <select class="transitionsClass">
            <option value="ButterflyWaveScrawler">Butterf
        </select>
    </div>
    <div> 滤 镜 ： <input class="filterClass" type="checkbox" value="gray"> 置灰</input> </div>
    <div> 文 字 ： <input class="textClass" type="checkbox" value="text"> 默认文字</input> </div>
</dl>

元素引用

• $(“#id”) : id对应的element
• $(“.class”) : class对应的element
• $(this) : 当前对象

元素追加

$(“#id”).append(“html”);

动态添加的元素追加事件监听

$(document).on("click", classElement, function () {

        console.log(this);
})

删除当前对象对应的HTML

$(this).remove()

当前节点的父节点

$(this).parent()

当前节点的父节点且一级孩子节点class为fileClassDiv的孩子节点

$(this).parent().children(fileClassDiv);

当前节点的父节点且孩子节点class为fileClassDiv的孩子节点（包含子孙节点）

$(this).parent().find(fileClassDiv);

当前节点的上一个节点（同级）

$(this).prev()

当前节点的下一个节点（同级）

$(this).next()

自定义属性值 data-x

<div class="fileClassDiv" data-index="0" data-text="">+</div>

• 设置index值 ： $(“#id”).data(“index”, value);
• 获取index值 ： $(“#id”).data(“index”);

常用HTML组件

Select option

• 是否选中

$(this).prop(‘checked’);

• 选中选项值

$(this).val();