首页 > 代码库 > jquery的常用核心方法

jquery的常用核心方法

2024-09-30 17:40:39   203人阅读

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/a1.css">
    <script src="http://www.mamicode.com/js/jquery.min.js"></script>
</head>
<body>
    <div id="box">
        box
    </div>
    <div id="box1">
        box1
    </div>
    <div id="box2">
        box2
    </div>
</body>
<script src="http://www.mamicode.com/js/a1.js">
//$() = jQuery();
//$(".title") 选择对象
//click() 触发条件
//function(){} 操作函数
//.是运算符

//DOM对象，对应DOM对象下的属性和方法 this
//jquery对象，对应jquery对象下的属性和方法 $(this)，jquery对象前面有个$

//1.each()
$("div").each(function(){ //each()遍历$("div")的返回值，有三个div
    alert($(this)); //object Object, jquery对象
    //alert(this); //返回this就是这个div对象object HTMLDivElement，DOM对象
    //alert(this.innerHTML); //DOM对象返回div中的内容
});

//2.size(), length
$("div").size(); //得到获取的标签的长度，也可以说$("div")数组的长度
$("div").length; //得到获取的标签的长度

//3.DOM对象与jQuery对象互转
var box = document.getElementById("box"); //DOM定义变量
var box1 = $("#box"); //jquery定义变量
alert(box); //返回object HTMLDivElement
alert(box.innerHTML); //返回box
alert($(box)); //返回object Object, *** DOM对象转jquery对象
alert($(box).html()); //返回box


alert($("div")); //返回object Object
alert($("div").html()); //值返回一个值box
alert($("div").get(0)); //返回object HTMLDivElemet  *** jquery对象转DOM对象，因为这样的div有三个，0 1 2

$("div").click(function(){
    alert(this.innerHTML);
});

$("div").click(function(){
    alert($(this).html());
});
</script>
</html>

 

jquery的常用核心方法


联系
我们