jQuery-----2.13第二次课

最新推荐文章于 2024-04-29 21:08:23 发布

左希希

最新推荐文章于 2024-04-29 21:08:23 发布

阅读量100

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Rococoberry/article/details/104308962

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一尺寸

height 、width：设置或者获取元素的宽和高，设置的值不带px，设置的样式是行内样式；
innerHeight()、innerWidth()：不包括边框，包括补白（padding 之内的属性也算）；
outerHeight([options])、outerWidth([options])：包含边框，获取的是宽和高度的问题(所占页面的实际高和宽)，根据盒子模型去计算元素整体宽和高；
参数 options ：设置为true时，计算的时候包含边距；

二文档处理

（一）内部插入

append 追加当前元素的内容之后；
appendTo：追加当前元素的内容之后；
二者区别：前后位置颠倒。如下，两种写法所呈现的执行结果是一样的：

$(".block").append($(".small"));
$(".small").appendTo($(".block"));

prepend ：追加到当前元素的内容之前；
prependTo ：追加到当前元素的内容之前；
二者区别：前后位置颠倒。同上。

$(".block").prepend($(".small"));
$(".small").prependTo($(".block"));

jquery里面如何创建dom元素

//jquery 创建dom
        var ele=$("<div></div>>");
        //给创建的jquery对象添加类   直接在标签上去书写
        ele.addClass("child2");
        console.log(ele);
        //将创建创建的dom 追加到block
        $(".block").append(ele);

（二）外部插入

after 插入元素之后；
insertAfter 追加到元素之后和after 区别前后位置颠倒；

$(".child").after($(".small"));
$(".small").insertAfter($(".child1"));

before 插入到元素之前；
insertBefore 追加到元素之前和before 区别前后位置颠倒；

$(".child1").before($(".small"));
$(".small").insertBefore($(".child1"));

三元素包裹

wrap：包裹，一对一进行包裹；
unwrap ：移除指定元素的父元素；
wrapAll ：将匹配的元素全部包起来；
wrapInner ：将元素的内容包裹起来；

四元素替换

replaceWith：替换；如：将div替换为文本框

var ipt=$("<input type='text' class='price'/>");
ipt.val($(".price").html());
$(".price").replaceWith(ipt);

replaceAll：前替换后；

五事件的绑定和移除

on 与 off；
on：同时绑定多个事件，中间用空格隔开；
off ：写一个参数，移除指定事件；若不写任何参数时，该元素的所有事件被移除；
bind 与unbind：事件的移除和绑定，与On 、off一致；

$("#btn").on("click", function () {
            console.log("你点击我");
        });

对于数组类型：（也可以写多个数组，数组嵌套数组）

var obj={"name":"张三","sex":"男","age":"20"};

.one：一次性事件；
事件切换：hover

        $(".block").on("mouseover mouseout", function () {
            console.log(1);
        });

        $(".block").hover(function () {
            //over
            console.log("鼠标悬停");
        }, function () {
            //out
            console.log("鼠标离开");
        });

jquery 里面封装的事件方法:

blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])1.8-
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
链式操作：

        $(".block").click(100, function (e) {
            console.log("单击", e.data);
        }).mousedown(function () {
            console.log("鼠标按下");
        }).mouseenter(function () {
            console.log("鼠标进入");
        }).mouseleave(function () {
            console.log("鼠标离开");
        });