WEB代码搜索笔记：jquery、CSS、HTML、js

最新推荐文章于 2022-09-28 14:36:06 发布

hahahafree

最新推荐文章于 2022-09-28 14:36:06 发布

阅读量118

点赞数

分类专栏： Web jQuery 文章标签： WEB

本文链接：https://blog.csdn.net/weixin_43731793/article/details/99061604

版权

Web 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

jQuery

17 篇文章 0 订阅

订阅专栏

jquery

$(function(){ }

$(function(){ } 这是jquery里的,是当文档载入完毕就执行,的意思.

mouseenter

只有在鼠标指针经过被选元素时(不包括鼠标指针经过任何子元素)，才会触发 mouseenter 事件。

jquery获取元素p的序号-index()

<script>
$(document).ready(function(){
 $("p").on("click", function () {
        alert($(this).index("p"));
    });
});
</script>
</head>

<body>
<div>
  <p>Hello!</p>
	 <p>Hello2222222222222222222222!</p> 
	<p>Hello3333333333333333333333333333!</p>
</div>

</body>

jQuery :eq() 选择器

选择第二个 <p> 元素：

$("p:eq(1)")

index

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

jQuery animate() 方法用于创建自定义动画。



语法：
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。


$("button").click(function(){
    $("div").animate({left:'250px'});

scroll

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

each() 方法规定为每个匹配元素规定运行的函数。

$(selector).each(function(index,element))

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

CSS

list-style:none;

去掉ul的小圆点

text-decoration: none;

去掉下划线

text-decoration: underline;*

加下划线

font-weight 属性设置文本的粗细。

normal 	默认值。定义标准的字符。
bold 	定义粗体字符。
bolder 	定义更粗的字符。
lighter 	定义更细的字符。

    100
    200
    300
    400
    500
    600
    700
    800
    900

	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 	规定应该从父元素继承字体的粗细。

text-align: center;

text-align 属性规定元素中的文本的水平对齐方式。
left 	把文本排列到左边。默认值：由浏览器决定。
right 	把文本排列到右边。
center 	把文本排列到中间。
justify 	实现两端对齐文本效果。
inherit 	规定应该从父元素继承 text-align 属性的值。

margin

margin属性可以有一到四个值。

    margin:25px 50px 75px 100px;
        上边距为25px
        右边距为50px
        下边距为75px
        左边距为100px

    margin:25px 50px 75px;
        上边距为25px
        左右边距为50px
        下边距为75px

    margin:25px 50px;
        上下边距为25px
        左右边距为50px

    margin:25px;
        所有的4个边距都是25px

position: relative;*

相对定位

position: absolute;*

绝对定位

overflow 属性规定当内容溢出元素框时发生的事情。

overflow: hidden;

visible 	默认值。内容不会被修剪，会呈现在元素框之外。
hidden 	内容会被修剪，并且其余内容是不可见的。
scroll 	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 	规定应该从父元素继承 overflow 属性的值。

background:url no-repeat left top

background:url 背景图片地址

no-repeat 背景图片不重复显示（横向和竖各都不重复）

left top 背景图的位置是从元素的左上方开始显示

vertical-align

vertical-align: middle;

baseline 	默认。元素放置在父元素的基线上。
sub 	垂直对齐文本的下标。
super 	垂直对齐文本的上标
top 	把元素的顶端与行中最高元素的顶端对齐
text-top 	把元素的顶端与父元素字体的顶端对齐
middle 	把此元素放置在父元素的中部。
bottom 	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 	把元素的底端与父元素字体的底端对齐。
length 	 
% 	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 	规定应该从父元素继承 vertical-align 属性的值。

outline: 0;
无轮廓

text-align: center;



left 	把文本排列到左边。默认值：由浏览器决定。
right 	把文本排列到右边。
center 	把文本排列到中间。
justify 	实现两端对齐文本效果。
inherit 	规定应该从父元素继承 text-align 属性的值。

cursor: pointer;



default 	默认光标（通常是一个箭头）
auto 	默认。浏览器设置的光标。
crosshair 	光标呈现为十字线。
pointer 	光标呈现为指示链接的指针（一只手）
move 	此光标指示某对象可被移动。
e-resize 	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 	此光标指示矩形框的边缘可被向上（北）移动。
se-resize 	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 	此光标指示矩形框的边缘可被向下移动（南）。
w-resize 	此光标指示矩形框的边缘可被向左移动（西）。
text 	此光标指示文本。
wait 	此光标指示程序正忙（通常是一只表或沙漏）。
help 	此光标指示可用的帮助（通常是一个问号或一个气球）。

font-weight 属性设置文本的粗细。



normal 	默认值。定义标准的字符。
bold 	定义粗体字符。
bolder 	定义更粗的字符。
lighter 	定义更细的字符。

    100
    200
    300
    400
    500
    600
    700
    800
    900

	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 	规定应该从父元素继承字体的粗细。

box-shadow

box-shadow: 4px 2px 5px rgba(0,0,0,0.2);


4px：阴影水平偏移值（可取正负值）；
2px：阴影垂直偏移值（可取正负值）；
5px：阴影模糊值；

rgba(0,0,0,0.2)中：

第一个0：R

第二个0：B

第三个0：G

第四个0.2表示透明度为20%。

border-left-style 属性



none 	定义无边框。
hidden 	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 	定义点状边框。在大多数浏览器中呈现为实线。
dashed 	定义虚线。在大多数浏览器中呈现为实线。
solid 	定义实线。
double 	定义双线。双线的宽度等于 border-width 的值。
groove 	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 	定义 3D inset 边框。其效果取决于 border-color 的值。
outset 	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 	规定应该从父元素继承边框样式。

border-radius:添加圆角边框

text-overflow 属性规定当文本溢出包含元素时发生的事情。



clip 	修剪文本。 	测试
ellipsis 	显示省略符号来代表被修剪的文本。 	
string 	使用给定的字符串来代表被修剪的文本。

white-space 属性设置如何处理元素内的空白。



normal 	默认。空白会被浏览器忽略。
pre 	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 	保留空白符序列，但是正常地进行换行。
pre-line 	合并空白符序列，但是保留换行符。
inherit 	规定应该从父元素继承 white-space 属性的值。

vertical-align 属性设置元素的垂直对齐方式。



baseline 	默认。元素放置在父元素的基线上。
sub 	垂直对齐文本的下标。
super 	垂直对齐文本的上标
top 	把元素的顶端与行中最高元素的顶端对齐
text-top 	把元素的顶端与父元素字体的顶端对齐
middle 	把此元素放置在父元素的中部。
bottom 	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 	把元素的底端与父元素字体的底端对齐。
length 	 
% 	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 	规定应该从父元素继承 vertical-align 属性的值。

display: none;

none 	此元素不会被显示。
block 	此元素将显示为块级元素，此元素前后会带有换行符。
inline 	默认。此元素会被显示为内联元素，元素前后没有换行符。

display 属性规定元素应该生成的框的类型。



block 	此元素将显示为块级元素，此元素前后会带有换行符。
inline 	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block  就是共用一行的块级元素

***
*text-overflow 属性规定当文本溢出包含元素时发生的事情。*

clip 	修剪文本。 	
ellipsis 	显示省略符号来代表被修剪的文本。 	
string 	使用给定的字符串来代表被修剪的文本。

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

color_name 	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number 	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 	默认值。边框颜色为透明。
inherit 	规定应该从父元素继承边框颜色。

border-color:red green blue;
    上边框是红色
    右边框和左边框是绿色
    下边框是蓝色

word-break 属性规定自动换行的处理方法。

normal 	使用浏览器默认的换行规则。
break-all 	允许在单词内换行。
keep-all 	只能在半角空格或连字符处换行。

opacity 属性设置元素的不透明级别。

value 	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 	
inherit 	应该从父元素继承 opacity 属性的值。

position 属性规定元素的定位类型。

 	

absolute					生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
					
					元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


	fixed 						生成绝对定位的元素，相对于浏览器窗口进行定位。
						
						元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。


	relative 					生成相对定位的元素，相对于其正常位置进行定位。
					
					因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 	规定应该从父元素继承 position 属性的值。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

none 	定义不进行转换。 	测试
matrix(n,n,n,n,n,n) 	定义 2D 转换，使用六个值的矩阵。 	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 	定义 3D 转换，使用 16 个值的 4x4 矩阵。 	
translate(x,y) 	定义 2D 转换。 	测试
translate3d(x,y,z) 	定义 3D 转换。 	
translateX(x) 	定义转换，只是用 X 轴的值。 	测试
translateY(y) 	定义转换，只是用 Y 轴的值。 	测试
translateZ(z) 	定义 3D 转换，只是用 Z 轴的值。 	
scale(x,y) 	定义 2D 缩放转换。 	测试
scale3d(x,y,z) 	定义 3D 缩放转换。 	
scaleX(x) 	通过设置 X 轴的值来定义缩放转换。 	测试
scaleY(y) 	通过设置 Y 轴的值来定义缩放转换。 	测试
scaleZ(z) 	通过设置 Z 轴的值来定义 3D 缩放转换。 	
rotate(angle) 	定义 2D 旋转，在参数中规定角度。 	测试
rotate3d(x,y,z,angle) 	定义 3D 旋转。 	
rotateX(angle) 	定义沿着 X 轴的 3D 旋转。 	测试
rotateY(angle) 	定义沿着 Y 轴的 3D 旋转。 	测试
rotateZ(angle) 	定义沿着 Z 轴的 3D 旋转。 	测试
skew(x-angle,y-angle) 	定义沿着 X 和 Y 轴的 2D 倾斜转换。 	测试
skewX(angle) 	定义沿着 X 轴的 2D 倾斜转换。 	测试
skewY(angle) 	定义沿着 Y 轴的 2D 倾斜转换。 	测试
perspective(n) 	为 3D 转换元素定义透视视图。

HTML

* *

<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

<b>这是一个加粗文本</b>

JS

Math 对象方法

abs(x) 	返回数的绝对值。
acos(x) 	返回数的反余弦值。
asin(x) 	返回数的反正弦值。
atan(x) 	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 	对数进行上舍入。

hahahafree

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB代码搜索笔记：jquery、CSS、HTML、js

jquery$(function(){ }$(function(){ } 这是jquery里的,是当文档载入完毕就执行,的意思.display:inline-block就是共用一行的块级元素mouseenter只有在鼠标指针经过被选元素时(不包括鼠标指针经过任何子元素)，才会触发 mouseenter 事件。****CSSlist-style:n...
复制链接

扫一扫