2018-08-20-Python全栈开发day44-jquery进阶

jquery进阶

1.jq属性操作，html、text、val方法

　　

$('div').hasClass('p')是否属于这个类
var s1=$('div').attr('p');得到自己定义属性的对应值
$('div').attr('p','alex');设置新的属性和对应的值

以上attr都是返回相应的值。
attr是操作html的节点，prop是操作js对象
在prop中是返回true和false
var s1=$('div').prop('name')

2.addclass和removeclass

　　

$('div').addClass('good2');添加类
    $('div').removeClass('div1')删除类

3.innerHTML和innerText

html是识别其中的格式，text是将所有的内容当做一个字符串来看

4.jquery中css的用法

　　

$('div').css('color','red').css('width','200px');
    $('div').css({'color':'red','width':'20px'})
两种方法来同时设置多种样式

5.jquery中的循环

　对于js来说，得到一个数组需要循环才可以使用，但是对于jq来说，得到一个数组标签，可以同时对这些标签进行修改

　　

<script src="jquery-3.3.1.js"></script>
<script>
    var arr=[11,22,33,44];
    $.each(arr,function (x,y) {
        alert(x);
        alert(y);
    })
使用jq自带的each来进行循环，会自动带两个参数，x为元素的顺序，y是数组的元素

　　

<script src="jquery-3.3.1.js"></script>
<script>

    var arr=$('div');
    arr.each(function () {
        alert(this.innerText)
    })

使用this来代替循环体中元素，然后对其使用

6.jq的增删改查

　　内部插入

　　

 $('.he1').click(f1);
    function f1() {
        $('.he1').append('<h1>world</h1>')
    }

在div插入子代标签，这个是在最后插入
prepend是在最上面插入

　　ele.appendto div1

　　这个用法是ele成为div1的子代标签

　外部插入

$('.he1').click(f1);
    function f1() {
        $('.he1').after('<h1>world</h1>')
    }
在下面插入兄弟标签
、】

before是在前面

替换

$('.he1').click(f1);
    function f1() {
        $('.he1').replaceWith('<h1>world</h1>')
    }

用一个标签替换另一个标签

删除与清空

$('.he1').empty();将标签里面的内容清除，但是这个标签还在
    $('.he1').remove()直接让这个标签消失

 

克隆

var s1=$('.he1').clone();

 7.css操作--offset和position

　offset

　　是相对于视图也就是body的偏移量，只有top和left属性

var ele=$('div').offset({top:100,left:200});

position

　　相对于有已经定位的标签的偏移量　　，如果父亲已经定位，则相对于父亲来定位，如果一直没有，则相对于body