JavaScript-Jquery学习笔记------《1》

1.属性和方法的操作：

·属性：

        Attr:属性，元素.attr();获取属性；

        Attr(attr,value):设置属性；

        Attr({"key":"value"})：设置多个属性的方法；

        Attr("key","fn接受函数的返回值")：通过函数的返回值设置属性；

                 $("img").attr("src","b.jpg");

                 $("input").attr("value",function() {return "onclick"});

         removeAttr(name):删除name属性；

                  $("input").removeAttr("value");

注意：样式以class为主，id太多会引起页面卡顿；  

2.CSS类：

addClass(className):添加一个类；         

<input type="button" value="点击">

<script type="text/javascript">

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

       $("div").addClass("abcd");//注：abcd是一个样式

})

</script>

removeClass(className):删除一个类；

<input type="button" value="点击">

<script type="text/javascript">

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

       $("div").removeClass("abcd");//注：abcd是一个样式

})

</script>

HTML代码：

Html()：获取的是对象内的Html代码；

Html(daiji):设置html中的内容；

<input type="button" value="点击">
<script type="text/javascript">
    $("input").click(function(){
        //console.log($("div").Html());
        console.log($("div").Html("<b>加粗</b>"));
    })
</script>

Text内容：

标签中的文本内容；

//将文本中内容打印出来
console.log($("div").text());
//设置文本中的内容
$("div").text("这是新的内容")
//注意text不识别标签，Html识别标签

Text()：获取元素中的文本内容；

Text(value)：设置元素中的文本内容；

Val值：

input中的value值；

val():获取value值；

val(zhi):设置value值；

//查看
console.log($("input").val());
//设置
$("input").val("点击");

对象访问：

length：个数；

size：个数；

each：遍历

each：代表每个元素；

用法：元素.each(function(index,element){})；

index:表示下标；

element：元素；

//$("div").html("hahaha");
$("input").click(function(){
    $("div").each(function(n,obj){
        //console.log(n);
        //console.log(obj);
        //此时this可以代表当前的obj
        $(this).html("这是第"+n+“个”);
    })
})

DOM：文档处理

<div>aaa</div>

内部插入：父子级关系；

$(a).Append($(b)) :把b放入a中；

$(b).AppendTo($(a)):把b放入a中；

$(a).prepend($(b)):把b插入a中（a里面的前面）;

$(b).prependTo($(a)):把b插入a中（a里面的前面）；

<input type="button" value="点击">
<script>
    $("input").click(function(){
        $("div").append($("<p>段落</p>"))//放置在后面
    })
</script>