-->

WEB资讯

您的当前位置:首页 > 资讯 > JS

jQ的事件和DOM操作

2021-04-06 10:17:44  来源:admin 点击:635

jQ对于事件进行了大量的封装,click()

$().click(function(){

   

});

 

jQ对于DOM操作

 

获取某些节点:document.getElementById();  ->  $(选择器)

添加内容:xxx.innerHTML = xxx;   ->   $().html();

1. 掌握常用的事件进行网页特效设计

jQ中的事件分类:

基础事件

鼠标事件

键盘事件

window事件

表单事件

复合事件

鼠标光标悬停

鼠标连续点击

 

1.1 掌握常用的鼠标事件

方法 描述       执行时机

click( )      触发或将函数绑定到指定元素的click事件     单击鼠标时

mouseover( )  触发或将函数绑定到指定元素的mouseover事件  鼠标指针移过时

mouseout( )    触发或将函数绑定到指定元素的mouseout事件    鼠标指针移出时

mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时

mouseleave( ) 触发或将函数绑定到指定元素的mouseleave事件 鼠标指针离开时

mouseover和mouseenter的区别?

 

穿过被选元素或其后代元素都会触发对应的mouseover事件。

 

只有在穿过被选元素时才会触发对应的mouseenter事件。

 

1.2 掌握常用的键盘事件

方法 描述       执行时机

keydown( )      触发或将函数绑定到指定元素的keydown事件     按下键盘时

keyup( )   触发或将函数绑定到指定元素的keyup事件   释放按键时

keypress( )      触发或将函数绑定到指定元素的keypress事件      产生可打印的字符时

<body onkeydown="enterLogin(event)">

    <form action="" method="post">

        帐号:<input type="text" name="username" /><br/>

        密码:<input type="password" name="pwd" /><br/>

        <input type="submit" value="提交"/>

    </form>

 

    <script type="text/javascript">

        function enterLogin(event){

            // 获取按下的键的键值

            var keyCode = event.keyCode;

            // alert(keyCode);

            if(keyCode == 13){

                // 提交表单

                document.forms[0].submit();

            }

        }

    </script>

</body>

1.3 浏览器事件

浏览器事件:resize() 改变浏览器窗口时 会触发。

 

scroll() 浏览器滚动事件

 

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    var x = 0;              

    /*$(window).resize(function(){

                       $(".test").html(++x);

               });*/

    $(window).scroll(function(){

        $(".test").html(++x);

    });

    // $(window).scrollLeft();

    // $(window).scrollTop();

</script>

1.4 绑定和解绑事件

事件函数

 

bind来绑定事件 unbind可以解绑事件

 

$().bind("事件名",函数);

$().bind({

    "事件名":函数,

    "事件名":函数

});

on绑定事件 off可以解绑事件

 

1.5 掌握常用的复合事件

hover:它等价于mouseover和mouseout事件的组合(其实以前用的是mouseenter和mouseleave)

 

$("#test").hover(function(){

    $(this).css("background","lawngreen");

},function(){

    $(this).css("background","white");

});

toggle:在1.8版本才能使用连续点击事件

 

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

    $("body").css("background","yellow");

},function(){

    $("body").css("background","blueviolet");

},function(){

    $("body").css("background","pink");

});

toggle:不带参数

 

toggleClass:

 

// 点击按钮 如果div存在 则隐藏  否则显示

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

        $("#test").toggle(); // 会自动判断

  });*/

 

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

    $("#test").toggleClass("addBd"); // 会自动判断是否有此样式

});

2. 掌握jQuery的常用DOM操作

2.1 CSS-DOM

css();

css(CSS属性名,CSS属性值); 设置单个效果

css({ 属性名1:值,属性名2:值 }); 设置多个效果

css(); 获取某个属性的值

addClass();

addClass(类属性名);

addClass(类属性名1 类属性名2); 例如:addClass(“test test1 test2”)

removeClass();

removeClass(类属性名);

removeClass(类属性名1,类属性名2);

toggleClass(); 见上方

hasClass(); 判断是否包含某个类样式

 

2.2 操作DOM节点(DOM-Core)

HTML代码操作 html() 等价于 xxx.innerHTML

 

标签内容操作 text() 等价于xxx.innerText

 

语法格式 参数说明       功能描述

html( )     无参数   用于获取第一个匹配元素的HTML内容或文本内容

html(content) content为元素的HTML内容    用于设置所有匹配元素的HTML内容或文本内容

text( )      无参数   用于获取所有匹配元素的文本内容

text (content)  content为元素的文本内容 用于设置所有匹配元素的文本内容

属性val的操作

 

value属性只有在表单元素中才有此属性。

 

value属性的获取 ,当初在JS时 直接xxx.value

 

xxx.val(); xxx.val(“xx”);

 

创建节点

 

// JS

var imgEle = document.createElement("img");

 

// JQ  利用工厂函数  直接可以将HTML字符串加工成对应的节点对象

$("<img src='xxx'/>")

插入节点

 

语法 功能

append(content)    ( A ) . a p p e n d ( B ) 表 示 将 B 追 加 到 A 中 如 : (A).append(B)表示将B追加到A中 如:(A).append(B)表示将B追加到A中如:(“ul”).append($newNode1);

appendTo(content) ( A ) . a p p e n d T o ( B ) 表 示 把 A 追 加 到 B 中 如 : (A).appendTo(B)表示把A追加到B中 如:(A).appendTo(B)表示把A追加到B中如:newNode1.appendTo(“ul”);

prepend(content)  ( A ) . p r e p e n d ( B ) 表 示 将 B 前 置 插 入 到 A 中 如 : (A). prepend (B)表示将B前置插入到A中 如:(A).prepend(B)表示将B前置插入到A中如:(“ul”). prepend ($newNode1);

prependTo(content)      ( A ) . p r e p e n d T o ( B ) 表 示 将 A 前 置 插 入 到 B 中 如 : (A). prependTo (B)表示将A前置插入到B中 如:(A).prependTo(B)表示将A前置插入到B中如:newNode1. prependTo (“ul”);

语法 功能

after(content) ( A ) . a f t e r ( B ) 表 示 将 B 插 入 到 A 之 后 如 : (A).after (B)表示将B插入到A之后 如:(A).after(B)表示将B插入到A之后如:(“ul”).after($newNode1);

insertAfter(content)      ( A ) . i n s e r t A f t e r ( B ) 表 示 将 A 插 入 到 B 之 后 如 : (A). insertAfter (B)表示将A插入到B之后 如:(A).insertAfter(B)表示将A插入到B之后如:newNode1.insertAfter(“ul”);

before(content)     ( A ) . b e f o r e ( B ) 表 示 将 B 插 入 至 A 之 前 如 : (A). before (B)表示将B插入至A之前 如:(A).before(B)表示将B插入至A之前如:(“ul”).before($newNode1);

insertBefore(content)    ( A ) . i n s e r t B e f o r e ( B ) 表 示 将 A 插 入 到 B 之 前 如 : (A). insertBefore (B)表示将A插入到B之前 如:(A).insertBefore(B)表示将A插入到B之前如:newNode1.insertBefore(“ul”);

删除和替换

// 删除元素

// $("#first").remove();

// 清空内容

$("li:first").empty();

 

// 用自己去替换别人

// $("<img src='images/f03.jpg' id='second'>").replaceAll($("#second"));

// 用别人替换自己

$("#second").replaceWith($("<img src='images/f03.jpg' id='second'>"));

复制节点 clone(boolean) boolean:是否复制事件

设置和获取属性值、删除属性

 

attr(属性名);  获取对应的属性值

attr(属性名,属性值);  给对应的属性设置值

attr({属性名:属性值,...})  可以同时设置多个

removeAttr(属性名); 删除属性

遍历子节点

childern([选择器]);  可以获取所有的直接子节点  也可以在其中添加选择器获取指定的子节点

find([选择器]); 可以通过它获取后代中的指定节点

遍历兄弟节点

next()

prev()

siblings([选择器]) 获取所有的兄弟节点

遍历父节点

parent(); 直接父节点

parents([选择器]); 获取祖先节点


相关文章更多 >

© 2024版权所有 水水网

电话:171780793