jquery基础

一、选择器

$("#id")               id选择器
$(".class")            class选择器
$("a") ->所有a标签      标签选择器
$("#id,.class,a")      多重选择
$("#id a") ->id下层的a标签，全部递归   层级选择
$("#id>a") ->id下层的a标签，只找子级   层级选择
$(":[input_type]")      input选择器 

$("[custom_attribute]")       自定义属性选择
$("[custom_attribute='value']")    自定义属性选择
$("#id").find(input[attribute = "value"]) ->id下层的属性为value的input标签

二、筛选

$(a:first)  找到第一个a标签
$(a:last)   找到最后一个a标签

$(a:eq(索引值)) 找到第一个a标签，索引值从0开始

$(a:gt(索引值)) 大于索引值
$(a:lt(索引值)) 小于索引值

$(:header)    $找到h标签

$(this).next()   下一个
$(this).prev()   上一个
$(this).parent() 父级
$(this).children()   子级
$(this).sibling() 兄弟标签

三、样式操作

addClass
removeClass
toggleClass

四、属性操作

attr("a") 查看属性
attr("a","v") 增加属性
removeAttr("a")

prop("checked") 效果同attr，用于checkbox、radio
prop("checked",true)

五、示例

示例一

    <script src="jquery.js"></script>
    <script>
        function check_all() {
            $(':checkbox').prop('checked',true);   #查找所有checkbox，使其选中
        }
        function cancel_all() {
            $(':checkbox').prop('checked', false); #查找所有checkbox，使其不被选中
        }
        function reverse() {
            $(':checkbox').each(function () {
                this.checked = this.checked? false:true   #反转checkbox的checked属性
            })  //1.X版本
        }
        $(".edit").click(function () {
            var texts = $(".dialog>input")
            var tds = $(this).parent().prevAll()

            $(texts[0]).val( $(tds[1]).text() )
            $(texts[1]).val( $(tds[0]).text() )

            $(".dialog").removeClass("hide")
            $(".mask").removeClass("hide")
        })

        $(".cancel").click(function () {
            $(".dialog").addClass("hide")
            $(".mask").addClass("hide")
        })
    </script>

 

示例二

<script src="jquery.js"></script>
    <script>
        $(".header").click(function () {
            //选中标签的父级的兄弟的class含有‘content’的标签，增加‘hide’样式
            $(this).parent().siblings().find('.content').addClass('hide')
            $(this).next().removeClass('hide')  //移除下一个标签的‘hide’样式
        })
    </script>