jQuery基础语法

最新推荐文章于 2023-06-11 13:49:24 发布

转载最新推荐文章于 2023-06-11 13:49:24 发布 · 130 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/YeHuan/p/10956129.html

文章标签：

#javascript #ViewUI

博客介绍了jQuery相关知识，包括语法，如工厂函数、选择器和方法；使用到的方法，如addClass()等，还对比了$(document).ready()和window.onload()；阐述了DOM对象和jQuery对象，指出两者方法不能混用，并说明了它们之间的转换方式。

　　一、语法

$(selector).action();

1.工厂函数 $()：将DOM对象转化为jQuery对象；

2.选择器 selector：获取需要操作的DOM元素；

3.方法 action()：jQuery中提供的方法，包括绑定事件处理的方法。

示例：

$(#id名).addClass("current"); // id选择
$(标签名).addClass("current"); // 标签选择
$(.class类名).addClass("current"); // class类名选择

二、使用到的方法

1.如：addClass()、css()、html()

<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#is").html("jQuery更新");
        
        $("a").click(function(){
        $(this).css("background-color","yellow");
        $(".cl").addClass("show");
        });
    });
</script>

<style type="text/css">
.cl{display:none}
.show{display:block}
</style>
<body>
    <p id="is">原始数据</p>
    <a href="javascript:;">查看隐藏内容</a>
    <p class="cl">这就是隐藏内容</p>
</body>

<a/>标签的点击事件还可以写成：

$("a").click(function() {
    $(this).css("background-color", "yellow")
    .next().addClass("show");
});

2.$(document).ready()和window.onload()的区别

前者是等待DOM文档结构绘制完毕后执行（不包括图片、flash、视频等），后者是等待网页中所有内容加载完毕后执行（包括图片、flash、视频等）。

三、DOM对象和jQuery对象

1.DOM对象

直接使用JavaScript获取的节点对象。

var objDOM = document.getElementById("id名");
var objHTML = objDOM.innerHTML;

2.jQuery对象

使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法。

$(#id名).html(); // 和上面的DOM对象效果一样

注：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用。

3.两者之间的转换

1.jQuery转DOM

jQuery对象是一个类似数组的对象，可以通过 [index] 的方法得到相应的DOM对象，也可以通过get(index)方法得到相应的DOM对象。

var $obj = $(".class名"); // jQuery对象
var obj = $obj[0]; // DOM对象
var obj = $obj.get(0); // Dom对象

2.DOM转jQuery

var obj = document.getElementById("id名"); // DOM对象
var $obj = $(obj); // jQuery对象

注：jQuery对象命名一般以$开头，常使用$(this)来获取触发该事件的当前jQuery对象。

转载于:https://www.cnblogs.com/YeHuan/p/10956129.html