jquery简介 each遍历 prop attr

一、JQ简介

jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

装载的先后次序：　　jQuery封装库在上，Js代码在下。

二、JQ语法

1.页面加载完成之后：

　　$(document).ready()=function(){};

　　$(function(){});

2.选择器

　　JS：document.getElementById();

　　JQ: $(选择器)　　

　　　　id选择器：$(“#id名称”);

　　　　元素选择器：$(“元素名称”);

　　　　类选择器：$(“.类名”);

3.操作内容

　　Js：表单 dom.value

　　非表单 dom.innerHTML

　　Jq 　表单 $.val() $.val(‘值’) 括号里是修改的值参数是调用的值

　　非表单$.html() 括号里是修改的值

4.操作属性

　　JS: setAttribute　　　　　　　　getAttribute

　　JQ:attr（‘class’，‘dd’）　attr（‘class’）

　　改多个变量时

　　 $.attr({属性名：属性值，属性名：属性值})

5.操作样式

　　Js dom.style

　　Jq $.css(属性名，属性值)

6.事件

　　Js dom.addElementL

　　 Dom.click = function

　　Jq $.click(function(){})

　　　　$(‘input:checked’)

　　　　$(‘input[type=”checkbox”]:checked’)

　　　　$(‘input:checkbox:checked’)

7.循环遍历

　　$().each(function(){ each 是循环

　　 $(this).

　　})

Jq转dom对象

　　$(‘#dd’) 变为 $(‘#dd’)[0] 或$(‘#dd’).get(0)

Js 转 jq

　　Var dom =document.getElementBuId();

　　$(dom)

下面是JQ控制全选按钮

$(document).ready(function(){
//全选
    $('#all').click(function(){
        //当全选框选中时
        if($("#all").prop('checked')){    //if($('#all:checked')){   不能得到选中，只得到  1
            //循环给多选框选中
            $('.more').each(function (){
                $(this).prop('checked',true);
            })
        }else{
            //循环给多选框不选中
            $('.more').each(function (){
                $(this).prop('checked',false);
            })
        }
    });
    //多选
    $('.more').click(function(){
        //定义标志
        var $flag = true;
        //遍历多选框，找到未选中的元素，标志设为false
        $('.more').each(function (){
            if($(this).prop('checked') == false){
                $flag = false;
                return false;
            }
        });
        //标志赋值给全选
        $('#all').prop('checked',$flag);
    })
});

下面是html代码

<p class="title">考试三 表格复选框全选</p>
<table><tr><th><input id="all" type="checkbox">全选</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td><input class="more" type="checkbox"></td><td>张三</td><td>男</td><td>23</td></tr><tr><td><input class="more" type="checkbox"></td><td>李四</td><td>男</td><td>25</td></tr><tr><td><input class="more" type="checkbox"></td><td>王五</td><td>女</td><td>23</td></tr>
</table>