前端学习B

最新推荐文章于 2022-11-06 14:59:42 发布

GanZzaz

最新推荐文章于 2022-11-06 14:59:42 发布

阅读量148

点赞数

分类专栏：前端文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/GanZzaz/article/details/126308994

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1JavaScript编程语言
1）三种引用JS

 <!DOCTYPE html>  

<html lang="en"> 
    <head> 
        <meta charset="UTF-8">
        <style type="text/css">
        </style> 
    </head>
    <body>
        <!-- <input type="button" value="按钮" οnclick="alert(123)"> -->
        <!-- <script>
            alert(123);
        </script> -->
        <script src="script.js"></script>
    </body>
</html>

2）变量

声明与赋值

            var aa;
            aa = 18;
            var age = 20;
            var h1 = 12，h2 = 13，h3 = 15；

变量命名规则
1.变量的名字必须是数字、字母、下划线_和$组成
2.变量名字不能以数字开头
3.变量的名字不能是关键字 for while if
在 J S 中变量是区分大小写的

数据类型 - 数值和字符串
数值 Number 型还有布尔 Boolean 型、字符串 String 型、undefined 型、null 型和对象 Object 型。
字符串型是使用单引号或双引号才是字符串，不管是数字还是名字。

转义符
\n 换行 \t 制表 \b 空格 \r 回车 \f 进纸 \ 斜杆 ’ 单引号 " 双引号 \xnn 十六进制 \u nnnn Unicode字符

undefined型表明了一个声明了没有赋值的变量，变量只声明了默认值为undefined
null值，变量的值如果想为空，必须手动赋值

        var age = 18;
        console.log(typeof age)

其他类型转为字符串
1)toString()
2)String()
3) + 拼接
其他类型转为数值
1）Number()

        var c = Number('c');//NaN
        var d = Number(null);//0
        var e = Number(undefined);//NaN
        console.log(c,d,e);

2)parseInt()

        var f = parseInt('2');//2
        var g = parseInt('a');//NaN
        var h = parseInt(null);//NaN
        var i = parseInt(undefined);//NaN

        console.log(f,g,h,i);

3)parseFloat()

        var a = parseFloat('1.23df');//1.23
        var b = parseFloat('1.3.4.5');//1.3
        var c = parseFloat('h34');//NaN
        var d = parseFloat(null);//NaN
        var e = parseFloat(undefined);//NaN

        console.log(a,b,c,d,e);

其他类型转换为boolean

        var a = Boolean('0');//true
        var b = Boolean(0);//false
        var c = Boolean('2');//true
        var d = Boolean(null);//false
        var e = Boolean(undefined);//false
        var f = Boolean('');//false
        var g = Boolean(' ');//true
        console.log(a,b,c,d,e,f,g);

3）比较运算符
== 判断两个值是否相等；!= 两个值不相等； === 全等于； !== 不全等
因为JS是弱类型语言，变量的类型存在自动转换。所以 == 只比较值，不比较数据类型

4）数组
创建

    var arr = [1,2,3];
    //字面量方式创建数组
    // var a1 =[];//创建空数组
    // var a2 =[1,'d'];
    // console.log(a1);
    //构造函数方式创建数组
    // var a3 = new Array(1,3,'h','k');
    // console.log(a3);

    // var l = a1.length;
    // console.log(l);

    //数组里面能有数组
    var a4 = [1,3,'k','2'];
    var a5 = [3,4,a4,'2'];
    console.log(a4);

遍历

    arr.forEach(element => {
        console.log(element)
    });

5）函数
声明
//关键字声明

function函数名(){

代码

}

//表达式声明

var f (函数名)= function(){

代码

}
调用
f1();（f1() 出现几次就是调用几次）
6）匿名函数

    (function(){
        alert(123);
    })();

//作用域：
防止全局变量的污染，封装一个局部作用
7）代码的执行
第一种

    var a = 12;
    function abc(){
        alert(a);//undefined 如果下面没有声明a 则为12
        var a =10;
    }
    abc();

第二种

    console.log(a);//函数
    function a(){
        console.log('aaa');
    }
    var a = 1;
    console.log(a);//1

如果变量和函数同名了，必须注意，函数的声明会替换变量声明
不管函数在变量的前面还是后面，赋值总会把前面的声明替换。
8）对象
声明
//字面量声明对象
var obj ={};
//对象中的数据都是健值成对存中的
//通常来说，值是函数则称为方法，其他类型的值都是属性。
var obj2 = {age:12,sg:190,name:‘123’};
//实例化方法声明对象(内置构造函数);
var obj2 = new Object();
//自定义构造函数方法
function Fun(){

}
//实例化自定义构造函数方法声明对象
var f = new Fun();

调用
var obj2 = {
age:12,
sg:190,
name:‘123’,
fei:function(){
console.log(3);
}
}

console.log(obj2.sg);
obj2.fei();

9)this是个对象
this指向全局对象(window)
10)for in 循环和删除
for(var k in obj2){
console.log(k);
}
var arr = [1,2,3,4,5];
for(var k in arr){
console.log(arr[k]);
}
删除
delete obj2.age;
11)包装对象
var a = ‘123’;
a.length;

12)数字对象
1 Math 使用
var r = Math.abs(n);
console.log(n2)
Math 是一个内置对象，它具有数学常数和函数的属性和方法。不是一个函数对象。

与其它全局对象不同的是, Math 不是一个构造器，Math 的所有属性和方法都是静态的.

跟数学相关的运算直接使用 Math 中的成员即可 I

Math 对象的属性(常量)

属性(常量) 描述

Math.E 常量数学常数 e。这是欧拉数，自然对数的底。

Math.LN2 常星 2 的自然对数。

Math.LN10 常量 10 的自然对数。

Math.LOG2E 常量以 2 为底 e 的对数。

Math.LOG10E 常量以 10 为底 e 的对数。

Math.PI 常量 Pi 这是圆的周长与直径的比值。

Math.SQRT12 常量 0.5 的平方根，或相当于 1 除以 2 的平方根。

Math.SQRT2 常量 2 的平方根。

Math对象的方法(函数)

方法（函数）描述

Math.abs 函数返回数字的绝对值。

Math.acos 函数返回数字的反余弦值。

Math.acosh 函数返回数字的双曲反余弦值（或反双曲余弦值）。

Math.asin 函数返回数字的反正弦值。

Math.asinh 函数返回数字的反双曲正弦。

Math.atan 函数返回数字的反正切值。

Math.atan2 函数将与X轴的角度(以弧度为单位)返回

由 y 和 x 坐标表示的点。

Math.atanh 函数返回数字的反双曲正切。

Math.ceil 函数返回大于或等于提供的数值表达式的最小整数。

Math.cos 函数返回数字的余弦值。

Math.cosh 函数返回数字的双曲余弦。

Math.exp 函数返回 e（自然对数的底）的乘幕数。

Math.expm1 函数返回e（自然对数的底）的乘幂数减去 1

结果。

Math.floor 函数返回小于或等于提供的数值表达式的最

整数。

Math.hypot 函数返回参数平方和的平方根。

Math.imul 函数返回被视为 32 位带符号整数的两个数字的积。

Math.log 函数返回数字的自然对数。

Math.loglp 函数返回 1 加上一个数字的的自然对数。

Math.log10 函数返回数字以 10 为底的对数。

Math.log2 函数返回数字以 2 为底的对数。

Math,max 函数返回提供的两个数值表达式中的较大值。

Math.min 函数返回提供的两个数字中的较小值。

Math.pow 函数返回基表达式的指定乘幕数的值。

Math.random 函数返回介于 0 和 1 之间的伪随机数。

Math.round 函数返回舍入到最近整数的指定数值表达式。

Math.sign 函数返回数字符号，它指示数字为正数、负数还是 0。

Math.sin 函数返回数字的正弦值。

Math.sinh 函数返回数字的反双曲正弦。

Math.sqrt 函数返回数字的平方根。

Math.tan 函数返回数字的正切值。

Math.tanh 函数返回数字的双曲正切。

13）时间对象
Var da=new date();
Console.log(da)
获取当前的时间：

Var n=date.now();

Console.log(n);

获取小时:

Var da=new date()

Console.log(da.gethours())

获取月份:

Console.log(da.getDate())

获取年份:

Console.log(da.getFullyear())

JS 获取的时间是计算本地时间，

JS 中月份的数组是从 0 开始的，如果要获取正常的月份可在后面 +1

Console.log(da.getDate()+1)
14)数组对象
length 属性:返回数组的成员数量。
push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组
pop 方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组
slice()方法返回一个新的数组对象，这一对象是由begin和end(不包括end)决定原数组的浅拷贝。原始数组不会被改变。
concat()方法合并两个或多个数组，此方法不会更改现有数组，而是返回一个新数组。
join()方法将以给数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串，如果数组只有一个项目，那么将返回该项目而不使用分隔符。
15）字符串对象
indexof(‘d’)查找d在哪个里
substr()方法返回一个字符串中从指定位置开始到指定字符数的字符
toLowerCase() 转换为小写，toUpperCase() 转换为大写。
replace(old,new) 替换，原字符不会变
trim()方法会从一个字符串的两端删除空白字符，在这个上下文中的空白字符是所有的空白字符以及所有行终止符字符(如LF、CR).

二、jQuery
1）jQuery简介
1.概念:jQuery是一个优秀的JavaScript库 ,而非JavaScript。它是轻量级的库。
2.兼容性:兼容css3 ,以及各种浏览器。
3.版本:
1.x---------容低端浏览器
2.x---------兼容从IE9开始以及高端浏览器
4.jQuery使用户能更方便的处理HTML、events、实现动画效果,并且方便的为网站提供Ajax交互。
5、优势:它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
基础语法: $ ( selector ) .action( )
(1)元符号$定义jQuery
(2)选择符( selector )“查询”和“查找”HTML元素 (3）jQuery的action( )执行对元素的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script src="app.js"></script>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>
<body>
    <p>哈</p>
    <p>哈</p>
    <p>哈</p>
    <p>哈</p>
    <p>哈</p>
</body>
</html>

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    })
});

2）基础选择器
1.All Selector (““)
描述:选择所有元素。
语法:$（””)
注意︰实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>
        <span></span>
        <p></p>
        <label></label>
    </div>
</body>
<script>
$(function(){
    $("div *").html("我们是一家人");
})

</script>
</html>

2.Class Selector (“.class”)

描述︰选择给定样式类名的所有元素。

语法:$( “.class” )

<body>
    <div>
        <span class="s"></span>
        <p></p>
        <label></label>
    </div>
</body>
<script>
$(function(){
    $(".s").html("我们是一家人");
})

</script>

3.Element Selector (“element”)

描述∶根据给定( html)标记名称选择所有的元素。

语法∶$( “element”)

<body>
    <div>
        <span></span>
        <p></p>
        <label></label>
    </div>
</body>
<script>
$(function(){
    $("span").html("我们是一家人");
})
</script>

4.ID Selector (“#id”)

描述︰选择一个具有给定id属性的单个元素。

语法∶$( “#id” )

<body>
    <div>
        <span></span>
        <p id="p"></p>
        <label></label>
    </div>
</body>
<script>
$(function(){
    $("#p").html("我们是一家人");
})
</script>

5.Multiple Selector
(“selector1, selector2, selectorN”)
描述∶将每一个选择器匹配到的元素合并后一起返回。
语法:$( “selector1, selector2, selectorN” )

<body>
    <div>
        <span></span>
        <p id="p"></p>
        <label></label>
    </div>
</body>
<script>
$(function(){
    $("#p,span").html("我们是一家人");
})
</script>

3）属性选择器
1.Attribute Contains Prefix Selector [namel=“value”]
描述∶选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“ ”)的元素。
语法∶$( “[attributel=‘value’]”)
注意:引号是可选的.可以是一个不带引号的一个单词或带一个引号的字符串。

<body>
    <a href="#" hreflang="en">英文</a>
    <a href="#" hreflang="zh">中文</a>
</body>
<script>
$(function(){
    $("[hreflang=en]").css("color","red");
})
</script>

2.Attribute Contains Selector [name*=“value”]
描述︰选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素)
语法︰ $(" [a tt r ib u t e * =^{'} v a l u e^{'}] ") 3. A tt r ib u t e C o n t ain s W or d S e l ec t or [nam e = " v a l u e "] 描述︰选择指定属性用空格分隔的值中包含一个给定值的元素。语法 :$ ( “[attribute~ =‘value’]” )

<body>
    <input name = "man-news"/>
    <input name = "milk man"/>
    <input name = "letterman2"/>
    <input name = "newmilk"/>
</body>
<script>
$(function(){
    $("input[name~='man']").val('mr.man is in it');
})
</script>

4.Attribute Ends With Selector [name$ =“value”]
描述:选择指定属性是给定值的元素。
语法∶ $(" [a tt r ib u t e =^{'} v a l u e^{'}] ") 5. A tt r ib u t e N o tEq u a lS e l ec t or [nam e! = " v a l u e "] 描述︰选择不存在指定属性，或者指定的属性值不等于给定值的元素。语法 :$ (“[attribute!= ‘value’]”)
6.Attribute Ends With Selector [name $= " v a l u e "] 描述 ∶ 选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。语法 :$ ( "[attribute $=^{'} v a l u e^{'}] ") 7. A tt r ib u t e St a r t s Wi t h S e l ec t or [nam e 个 = " v a l u e "] 描述︰选择指定属性是以给定字符串开始的元素。语法 ∶$ ( “[attribute个=‘value’]” )
8.Has Attribute Selector [name]
描述∶选择所有具有指定属性的元素，该属性可以是任何值。
语法∶$( “[attribute]” )
9.Multiple Attribute Selector [name=“value”][name2=“value2”]
描述∶选择匹配所有指定的属性筛选器的元素

<body>
    <input name = "man-news" id ="man-news"/>
    <input name = "milkman"/>
    <input id = "letterman" name="new-letterman"/>
    <input name = "newmilk"/>
</body>
<script>
    $(function(){
        $("input[id][name$='man']").val("only this one");
    })
</script>

4）基础过滤
1:animated Selector
描述∶选择所有正在执行动画效果的元素
语法∶$( “:animated” )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
            border: 1px solid  #aaaaaa;
            margin: 0 5px;
        }
        .colored{
            background-color: green;
        }
    </style>
</head>
<body>
    <button id = "run">run</button>
    <div></div>
    <div id = "mover"></div>
    <div></div>
</body>
<script>
    $(function(){
        $("#run").click(function(){
            $("div:animated").toggleClass("colored");
        });
        function animatedIt(){
            $("#mover").slideToggle("slow",animatedIt);
        }
        animatedIt();
    })
</script>
</html>

2.:eq ( ) Selector
描述∶在匹配的集合中选择索引值为index的元素。
语法︰
( 1 ) $ ( “:eq(index)” ) : index:要匹配元素的索引值(从O开始计数)
( 2 ) $ ( “:eq(-index)” ) : -index:.要匹配元素的索引值(从0开始计数)，从最后一个元素开始倒计数。
:even Selector
描述︰选择索引值为偶数的元素，从О开始计数。也可以查看odd （奇数)．
语法︰$ ( “:even” )
注意:这是基于O的索引，所以even选择器是选择第一个元素，第三个元素，依此类推在匹配。
3.:even Selector
描述︰选择索引值为偶数的元素，从О开始计数。也可以查看odd （奇数)．
语法︰$ ( “:even” )
注意:这是基于O的索引，所以even选择器是选择第一个元素，第三个元素，依此类推在匹配。
4.:first Selector
描述∶选择第一个匹配的元素。
语法:$ (“:first” )
5.:focus Selector
描述∶选择当前获取焦点的元素。
语法∶$ ( “:focus” )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        .focused{
            background-color: #abcdef;
        }
    </style>
</head>
<body>
    <div id = "content">
        <input tabindex="1">
        <input tabindex="2">
        <select tabindex="3">
            <option>select menu</option>
        </select>
        <div tabindex="4">
            a div
        </div>
    </div>
</body>
<script>
    $(function(){
        $("#content").delegate("*","focus blur",function(event){
            var e = $(this);
            setTimeout(function(){
                e.toggleClass("focused",e.is(":focus"));
            })
        })
    })
</script>
</html>

6、:header Selector
描述∶选择所有标题元素，像h1, h2, h3等.
语法:$ ( “:header” )
7、:last Selector
描述∶选择最后一个匹配的元素。
语法︰$ ( “:last”)
8、:gt（） Selector
描述∶选择匹配集合中所有大于给定index(索引值)的元素。
语法︰$ ( “:gt(index)”)或$ ( “:gt(-index)” )
9、:lt() Selector
描述∶选择匹配集合中所有索引值小于给定index参数的元素。
语法:$ ( “:lt(index)”)或$ ( “:lt(-index)”)

<body>
    <table border="1">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
    </table>
</body>
<script>
    $(function(){
        $("td:lt(4)").css("color","red");
    })
</script>

10、:not（） Selector
描述∶选择所有元素去除不匹配给定的选择器的元素。
语法∶$ ( “:not(selector)” )
5）子元素过滤
1.:first-child selector
描述︰选择所有父级元素下的第一个子元素。
语法:jQuery( “:first-child” )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        .sogreen{
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>s1</span>
        <span>s1</span>
        <span>s1</span>
    </div>
    <div>
        <span>s1</span>
        <span>s1</span>
        <span>s1</span>
    </div>
    <div>
        <span>s1</span>
        <span>s1</span>
        <span>s1</span>
    </div>
</body>
<script>
    $(function(){
        $("div span:first-child").css("text-decoration","underline").hover(function(){
            $(this).addClass("sogreen");
        },function(){
            $(this).removeClass("sogreen");
        });
    })
</script>
</html>

2、:last-child selector
描述∶选择所有父级元素下的最后一个子元素。
语法:jQuery( “:last-child” )
3、:first-of-type Selector
描述︰选择所有相同的元素名称的第一个兄弟元素。
语法:jQuery( “.first-of-type”)
4、:last-of-type Selector
描述∶选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
语法:jQuery( “:last-of-type” )
5、:nth-child( )Selector
描述∶选择的他们所有父元素的第n个子元素。
语法:jQuery( “:nth-child(index/even/odd/equation)” )
6）内容过滤
1、:contains()Selector
描述∶选择所有包含指定文本的元素
语法:jQuery( “:contains(text)” )

<body>
    <div>John Resig</div>
    <div>gggg Resig</div>
    <div>Malcom John Sinclail</div>
    <div>J.ojjj</div>
</body>
<script>
    $(function(){
        $("div:contains('John')").css("text-decoration","underline");
    })
</script>

2、:empty Selector
描述∶选择所有没有子元素的元素(包括文本节点)。
语法:jQuery( “:empty” )

<body>
    <table border="1">
        <tr><td>TD #0</td><td></td></tr>
        <tr><td>TD #2</td><td></td></tr>
        <tr><td></td><td>TD #5</td></tr>
    </table>
</body>
<script>
    $(function(){
        $("td:empty").text("was empty").css("background-color","red");
    })
</script>

3、:has() Selector
描述︰选择元素其中至少包含指定选择器匹配的一个种元素
语法:jQuery( “:has(selector)” )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        .text{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div><p>hello in a paragraph</p></div>
    <div>hello again!(with no p)</div>
</body>
<script>
    $(function(){
        $("div:has(p)").addClass("text");
    })
</script>
</html>

4、:parent Selector
描述∶选择所有含有子元素或者文本的父级元素
注意：JOuery “：parent” )
它们涉及的子元素都包括文本节点
7）表单选择器
1、:button Selector
描述∶选择所有按钮元素和类型为按钮的元素。
语法:jQuery( “:button”)
2、:checkbox Selector
描述∶选择所有类型为复选框的元素。
语法:jQuery( “:checkbox” )
3、:checked selector
描述∶匹配所有勾选的元素。
语法:jQuery( “:checked” )
4、:disabled Selector
描述∶选择所有被禁用的元素。
语法:jQuery( “:disabled” )
5、:enabled Selector
描述∶选择所有可用的(注∶未被禁用的元素)元素。
语法:jQuery( “:enabled” )
6、:file Selector
描述∶选择所有类型为文件( file )的元素。
语法:jQuery( “:file” )
7、:focus Selector
描述∶选择当前获取焦点的元素。
语法:jQuery( ":focus”)
8、:image Selector
描述∶选择所有图像类型的元素。
语法:jQuery( “.image”)
9.:input Selector
描述∶选择所有input, textarea, select和 button元素。
语法∶jQuery( “:.input” )
10、:password Selector
描述∶选择所有类型为密码的元素。
语法:jQuery( “:password” )
11、:radio Selector
描述︰选择所有类型为单选框的元素。
语法:jQuery( “:radio” )
12、:submit Selector
描述∶选择所有类型为提交的元素。
语法: jQuery( “:submit” )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        textarea{
            height: 35px;
        }
        div{
            color: red;
        }
        fieldset{
            margin: 0;
            padding: 0;
            border-width: 0;
        }
        .marked{
            background-color: yellow;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <input type="button" value="Input Button"/>
            <input type="checkbox"/>
            <input type="file"/>
            <input type="hidden">
            <input type="image">
            <input type="password">
            <input type="radio">
            <input type="reset">
            <input type="submit">
            <input type="text">
            <select><option>Option</option></select>
            <textarea></textarea>
            <button>Botton</button>
        </fieldset>
    </form>
</body>
<script>
    $(function(){
        var input = $(":button").addClass("marked");
        
    })
</script>
</html>