四十 jQ的事件和DOM操作

最新推荐文章于 2023-05-24 22:25:55 发布

L097_

最新推荐文章于 2023-05-24 22:25:55 发布

阅读量209

点赞数

文章标签： jq DOM操作

本文链接：https://blog.csdn.net/L097_/article/details/94314728

版权

四十章 — jQ的事件和DOM操作

jQ对于事件进行了大量的封装。click（）

$().click(function(){
    
});

jQ对于DOM操作

获取某些节点：document.getElementById();  ->  $(选择器)
添加内容：xxx.innerHTML = xxx;   ->   $().html();

一、掌握常用的事件进行操作

jQ中的事件分类：

基础事件
- 鼠标事件
- 键盘事件
- window事件
- 表单时间
复合事件
- 鼠标光标悬停
- 鼠标连续点击

1.掌握常用鼠标事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

mouseover 和mouseenter的区别（前端面试题）

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

只有在穿过被选元素是次啊会触发对应的mouseenter事件

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>

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>

4.绑定和解绑事件

1.事件函数

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

还可以同时绑定多个事件

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

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

5.掌握常用的复合事件

hover：它等价于mouseover和mouseout事件的组合（其实以前用的就是mouseenter和mouseleave）

$("#test").hover(function(){
    $(this).css("background","lawngreen");
},function(){
    $(this).css("background","white");
});

toggle：在jq1.8.3版本能用连续点击事件

$("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"); // 会自动判断是否有此样式
});

二、掌握jQuery常用DOM操作

1.CSS-DOM

css()；
- css(CSS属性名，CSS属性值)；
- css（属性名1：值，属性名2：值）
- css（）；获取某个属性的值
addClass（）；
- addClass（类属性名）；
- addClass（类属性名1 类属性名2）；
removeClass（）；
- removeClass（类属性名）；
- removeClass（类睡醒名1，类属性名2）；
toggleClass（）；见上方1.5
hasClass（）；判断是否包含某个样式

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 中如：$ (“ul”).append($newNode1);
appendTo(content)	$(A) . a p p e n d T o (B) 表示把 A 追加到 B 中如：$ newNode1.appendTo(“ul”);
prepend(content)	$(A) . p r e p e n d (B) 表示将 B 前置插入到 A 中如：$ (“ul”). prepend ($newNode1);
prependTo(content)	$(A) . p r e p e n d T o (B) 表示将 A 前置插入到 B 中如：$ newNode1. prependTo (“ul”);

语法	功能
after(content)	$(A) . a f t e r (B) 表示将 B 插入到 A 之后如：$ (“ul”).after($newNode1);
insertAfter(content)	$(A) . i n s e r t A f t e r (B) 表示将 A 插入到 B 之后如：$ newNode1.insertAfter(“ul”);
before(content)	$(A) . b e f o r e (B) 表示将 B 插入至 A 之前如：$ (“ul”).before($newNode1);
insertBefore(content)	$(A) . i n s e r t B e f o r e (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'>"));

复制节点 clon(boolean) boolean:是否复制事件
设置和获取属性值、删除属性

attr("属性名");获取对应的属性值
attr（属性名，属性值）；给对应的属性设置值
attr（{属性名：属性值...}）可以同时设置多个
removeAttr（属性名）；删除属性

遍历子节点

children(【选择器】); 可以获取所有的直接子节点 也可以在其中添加选择器获取指定的子节点
find();可以通过他获取后代的指定节点

遍历兄弟节点

next（）；
prev();
siblings([选择器]) 获取所有的兄弟节点

遍历父节点

parent();直接父节点
parents([选择器]); 获取祖先节点

L097_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫