Jquery基本内容二

1. jQuery属性操作

       prop()---设置或获取元素固有的属性
       attr()---操作元素自定义属性 
       data()---可以在指定元素上存取数据 （让内容存在 元素的内存中不显示）
   

2. jQuery操作文本

        html()/html('内容') 
        text()
        val() 
   

3. jQuery元素操作(创建、添加、删除、遍历) ****

jQuery操作文本

 <div>
        <p>
            <span>
                span
            </span>
        </p>
    </div>
    <input type="text" value="双12" name="" id="">
    <script src="./jquery.min.js"></script>
    <script>
        $(function() {
            // 相当于innerHTML
            // console.log($('div').html());
            // $('div').html('welcome');
            //  相当于innerText
            //console.log($('div').text());
             $('div').text('<p>welcome</p>');
             // val() 相当于value
             console.log($('input').val());
             console.log($('input').val('请输入内容'));
        });
    </script>

遍历

ele 原生dom元素
 $('div').each(function(index,ele) {})

 $.each(object,function() {})

遍历操作dom元素

 <div>aaaa</div>
    <div>bbbb</div>
    <div>cccc</div>
    <div>dddd</div>
    <script src="./jquery.min.js"></script>
    <script>
        $(function() {
            /*
            $('div').css('background','red');
            */
            var num = 1;
            // $("div").each(function(index,ele) {
            //     // ele 原生dom元素
            //     console.log(index);
            //     console.log(ele);
            //     $(ele).html(num++);
            // });
            $.each($('div'),function(i,ele) {
                console.log(i,ele);
            });
            $.each([10,20,30],function(i,ele) {
                console.log(i,ele);   
            });
            $.each({name: 'n1', age: 22},function(i,ele) {
                console.log(i,ele);   
            });
        });
    </script>

创建元素

$("<li></li>")

jQuery事件处理

ele.事件(function() {})  

 <div class="box">
       <ul>
           <li>item1</li>
       </ul>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        $(function() {
            // $('.box').click(function() {
            //     alert('ok');
            // });
            // $('.box').mouseenter(function() {
            //     $(this).css('background','red');
            // });

            /* on() 方法
            1 可以绑定多个事件，多个事件多个处理程序
            2 实现事件委托
            $('.box').on({
                click: function() {
                    alert('ok');
                },
                mouseenter: function() {
                    //$(this).css('background','red');
                    alert('ok');
                }
            });*/
            // $('.box').on('click',function() {
            //     alert('ok');
            // });
            /* 直接给子元素注册事件
            $('ul li').on('click', function() {
                console.log($(this).text());
            }); 
            */
            $('ul').on('click', 'li' ,function() {
                console.log($(this).text());
            }); 
            //$('ul').off(); // 解除ul身上所有的事件
            // $('ul').off('click');
            $('ul').off('click','li');

            $('ul').append($('<li>item2</li>'));
            
            $('ul li').one('mouseenter', function() {
                alert(123);
            });
        });
    </script>

• H5 自定义属性一般data-开头

<a href="http://www.baidu.com">百度一下</a>
    <input type="checkbox" name="" id="" checked>
    <p index='1' data-uname='zs'>p元素</p>
    <script src="./jquery.min.js"></script>
    <script>
        // ele.prop('属性名') 获取
        var url = $('a').prop('href');
        //属性名的设置
        console.log(url);
        $('a').prop('target','_blank');
        //改变状态会触发，原生js是onChange
        $('input').change(function() {
            console.log($(this).prop('checked'));
        });
        console.log($('p').prop('index')); // undefined  只能获取元素固定的属性
        console.log($('p').attr('index'));// 1  可以操作元素自定义属性
        $('p').attr('class','demo'); //设置属性值
        $('p').data('age',22);//存在元素的内存里，显示效果看不到
        console.log($('p').data('age'));//获取存入的值
        console.log($('p').data('uname')); // 可以读取H5自定义属性data-uname
    </script>
    

创建、添加、删除、遍历

 <div class="box">
        <ul>
            <li>item1</li>
        </ul>
    </div>
    <script src="./jquery.min.js"></script>
    <script>
        $(function() {
            // 创建元素
            var oLi = $('<li>item2 动态创建的</li>');
            // 添加元素
            //$('ul').append(oLi);
            //oLi.appendTo($('ul'));
            $('ul').prepend(oLi);

            var oDiv = $('<div>动态创建的odiv</div>');
            $('.box').before(oDiv);

            // 删除元素 remove()
            //$('ul').remove();
            //$('ul').empty();
            $('ul').html("");
        });
    </script>