jQuery基本操作1

jQuery中文文档

• 获取id
  • $(‘#id’)
• 获取class
  • $(‘.c1’)
• 获取标签
  • $(‘a’) 获取所有的a标签
• 组合选择
  • $(‘a,.c1’)获取所有a标签和c1类标签
  • $(‘a,.c1,#id’)获取所有a标签,c1标签和id
• 层级选择器
  • $(‘#id a’)获取id下面所有的a标签(子子孙孙)
  • $(‘#id>a’)获取id下面第一层的a标签(儿子)
• 基本选择器
  • $(‘a:first’)获取所有a标签的第一个
  • $(‘#id a:first’)获取id下面所有a标签的第一个
  • $(‘#id a:eq(0)’)获取id下面所有a标签的第一个索引
• 属性选择器
  • $(‘[ying]’)获取具有ying属性的所有标签
  • $(‘[ying=’123′]’)获取具有ying属性且ying=’123’的标签
  • $(“input[type=’text’]”)获取所有input标签且type=text的标签—-等于—–>$(‘:text’)
• 筛选器
  • $(this).next()获取下一个标签
  • $(this).prev()获取上一个标签
  • $(this).parent()获取父标签
  • $(this).children()获取子标签
  • $(this).siblings()获取当前标签的兄弟标签,不包括自己
  • $(this).find(‘#i1’)通过find去找含有i1或者class属性的标签
• 链式编程
  • $(this).next().removeClass(‘hide’).parent().siblings().find(‘.content-navbar’).addClass(‘hide’)
  • 只要是jQuery对象,就可以一直点下去进行操作

实例

{% extends 'app/base.html' %}

{% block title %}
    YingOps-jqtest
{% endblock %}

{% block fwqopen %}class="active open"{% endblock %}
{% block websshactive %}class="active"{% endblock %}

{% block content %}
<button class="btn-small btn-app btn-success" onclick="checkALL()">全选</button>
<button class="btn-small btn-app btn-success" onclick="reverskALL()">反选</button>
<button class="btn-small btn-app btn-success" onclick="cancelkALL()">取消</button>
<table border="1">
    <thead>
        <tr>
            <th>选择</th>
            <th>ip</th>
            <th>port</th>
        </tr>
    </thead>
    <tbody id="tb1">
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2.2.2.2</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3.3.3.3</td>
            <td>22</td>
        </tr>
    </tbody>

</table>

<div id="bt1">
    <div  style="background-color: #2e8965;">
        <h1 class="item">第1个标题</h1>
        <h3 class="content-navbar hide">第1个内容</h3>
    </div>
    <div  style="background-color: #2e8965;">
        <h1 class="item">第2个标题</h1>
        <h3 class="content-navbar hide">第2个内容</h3>
    </div>
    <div  style="background-color: #2e8965;">
        <h1 class="item">第3个标题</h1>
        <h3 class="content-navbar hide">第3个内容</h3>
    </div>

</div>

{% endblock %}

{% block js %}
<script>
    //1.将所有的bt1下面的itme绑定click事件,并通过筛选器,且搜索其他标签(父,兄弟)里含有content-navbar属性的标签,对该标签进行增加/删除hide属性
    $('#bt1 .item').click(function () {
        $(this).next().removeClass('hide').parent().siblings().find('.content-navbar').addClass('hide')
    })


    //2.checkbox事件函数
    function checkALL() {
        $('#tb1 :checkbox').prop('checked',true)
    }
    function cancelkALL() {
        $('#tb1 :checkbox').prop('checked',false)
    }
    function reverskALL() {
        //$('#tb1 :checkbox').each(function (k){}  这里的each是jQuery自带的循环功能,k是索引
        $('#tb1 :checkbox').each(function (k) {
            //这里的this就是dom对象
            //console.log(k, $(this))
            //判断目前的checked状态进行反向赋值,下面是根据Dom来做的
        //    if(this.checked){
        //        this.checked=false
        //    }else {
        //        this.checked=true
        //   }
            //判断目前的checked状态进行反向赋值,下面是根据jQUery来做的
        //     if($(this).prop('checked')){
        //        this.checked=false
        //    }else {
        //        this.checked=true
        //    }
            //三元运算方法  v=条件 ? 真值:假值    如果条件结果为真.则将真值赋值给v,否则将假值赋值给v
            var v=$(this).prop('checked')?false:true;
            $(this).prop('checked',v)
        });
    }
</script>

{% endblock %}