2020年12月22日 jQuery简介

$(document).ready(function(){

    //获取文本节点 获取用空参  赋值用传参

    var d1 = $("#d1").html();

    // alert(d1);

    //获取class是p1的元素

    var p1 = $(".p1").eq(0).html();

    //console.log(p1);

    var p2 = $(".p1").eq(1).html();

    //console.log(p2);

    //获取元素名是p的元素

    var p3 = $("p").eq(2).html();

    //console.log(p3);

    var a1 = $("[href]").eq(0).html();

    //console.log(a1);

    var a2 = $("[href = 'xxx']").eq(0).html();

    // console.log(a2);

    //更改文本内容的的值

    $("#d1").html("SpoungeBob");

    //val()方法获取value值

    var d1 = $("#b1").val();

    console.log(d1);

    var d2 = $("#b2").val();

    console.log(d2);

    $("#b1").val("XiaoHongMao");

    $(".p1").eq(0).css("color","red");

    $(".p1:last").css({

        "width":"200px",

        "height":"200px",

        "background":"pink"

    });

    //attr() prop()获取属性

    console.log($("#b1").attr("type"));

    console.log($("#b2").prop("type"));

    $("[href = '#']").attr({

        "href":"#",

        "title":"THIS IS TITLE"

    });

    

    

    //移除属性

    $("[href = '#']").removeAttr("title");

});

 

jQ对象和js对象可以相互转化

 

$(function(){

    var b1 = document.getElementsByTagName("input")[0];

    console.log($(b1).val());

    var val=$("input:last")[0].value;

    $("input:first").blur(function(){

        alert($(this).val());

    });

    $(".b2").click(function(){

        alert($(this).index());

    });

});

===============
json格式：
{
'color':'red',
'height':'200px'
}
注意json格式和普通格式的区别
=============
jq属性相关的方法：
attr()
prop()
一个参取值，两个参赋值
removeAttr（）
=============
<p class="redP big">html指定多个类
=================
js对象转换为jq对象 $(obj1)
jq对象转换为js对象 $('div')[0] $('div').get(0)
=============
jq入口函数：
$(document).ready(function(){

});
或
$(function(){

});
=================
jq选择器选择一类对象后，不需要再一个一个遍历一遍，如果需要区分
可以用$(this)
=================
bootstrap引入顺序：bootstrap.css jq.js bootstrap.js
==============
bs container相当于最外面最大的div