jQuery（三）

一、使用jquery操作DOM

dom : 文档对象模型    就是HTML元素  
            
            js中如何操作DOM节点
            document.write("<p>我是p标签</p>");        
            缺点:无法在指定的位置生成元素
            
            
            $()   函数的2个用法:
            用法1:放入一个字符串(选择器)表示获取元素   例如$("p") $("#abc")  $(".del")
            用法2:放入一个函数，表示文档就绪函数   例如  $(function(){代码...})
            
            用法3:如下所示
            
            jquery创建节点的方法如下：
            1.创建节点 语法如下:
            $("xxxxx"); xxx表示你要创建的dom元素   例如  $("<p>我是p标签<p>");
            
            此时仅仅是创建了节点.理解为是孤儿节点.  需要将其插入到某个节点中.
            例如 放入body标签中 方法div标签中等等.
            
            
            插入方法1:append() 表示插入到指定元素内部的尾端.
            语法: $("aa").append("bb")  表示将bb插入到aa内部的尾端
            
            需求如下:
            在div的尾端插入一个值为555的p标签
            
            1.创建一个值为555的p标签
            let a =  $("<p>555<p>");
            //调用方法即可
            $("div").append(a);
            
            
            插入方法2:prepend() 表示插入到指定元素内部的首端.
            语法: $("aa").prepend("bb")  表示将bb插入到aa内部的首端
            
            
            需求如下:
            在div的首端插入一个值为000的p标签
            //1.创建一个值为000的p标签
            let a =  $("<p>000<p>");
            //调用方法即可
            $("div").prepend(a);
            
            
            
            插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
            语法: $("aa").after("bb")  表示将bb插入到aa的后面
            
            
            需求如下:
            在111的后面插入一个1.5 1.5 1.5
            1.创建一个值为000的p标签
            let a =  $("<p>1.5 1.5 1.5<p>");
            调用方法即可
            $("p:eq(0)").after(a);
            
            插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
            语法: $("aa").before("bb")  表示将bb插入到aa的前面
            
            
            需求如下:
            在333的前面插入一个2.5 2.5 2.5
            1.创建一个值为2.5 2.5 2.5的p标签
            let a =  $("<p>2.5 2.5 2.5<p>");
            调用方法即可
            $("p:eq(2)").before(a);
            
            
            上述的方法 可以实现 在任意位置创建新的节点.
            
            
            下述的方法 可以实现 删除任意位置的节点:
            
            方法1:  remove()
            语法如下:  $("xx").remove();  将xx元素彻底删除  不仅删除了值 而且删除了标签  
            
            需求如下: 将444的p标签删除
            
            $("p:eq(3)").remove();
            
            方法2:  empty()  清空
            语法如下:  $("xx").empty();  将xx元素删除值 但是不删除标签  
            
            需求如下: 将444的p标签删除
            
            $("p:eq(3)").empty();
            
            克隆节点
            语法:  $("xxx").clone();  将xxx元素复制一份
            注意事项:上一步仅仅只是复制   此时理解为孤儿节点. 任然需要通过append  prepend  after  before进行粘贴
            
            例如:将111复制一份到444的后面

二、show和hide方法

            $("xx").hide();隐藏XX元素
            $("xx").show();显示XX元素
            $("xx").toggle();来回切换：显示或隐藏XX元素

三、addClass()和removeClass()方法

            $("xx").addClass("a");给元素添加类名为a
            $("xx").removeClass("aa);给元素移除类名为a
            
            
            $("p").addClass("a");
            $("p").addClass("b");
            $("p").addClass("c");
            
            jquery对象的特点:  调用任意方法的返回值 依然是它本身
            $("p").addClass("a").addClass("b").addClass("c").click(function(){
                alert(123);
            }).mouseover(function(){
                alert(567)
            }).removeClass("c");

四、//$("xx").index();返回当前元素在兄弟中下标
            
            $("button").click(function(){
                // $(this);获取当前的元素
                alert(  $(this).index()  )    
            });

五、each方法讲解

each方法的语法:   $("xx").each(   function(){  代码体   }   );
            遍历xx元素.每遍历一次  就执行一次代码体.
            
            
            这种写法 较为局限 但是也很重要  
            $("p").text("你好");
            
            
            var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻","这是第4条新闻","这是第5条新闻"]
            
            $("p").each(function(){
                $(this).text(  arr[$(this).index()]   );
            });