JQuery权威指南手抄学习（一）

最新推荐文章于 2021-08-12 01:07:14 发布

hooyoungzhang

最新推荐文章于 2021-08-12 01:07:14 发布

阅读量325

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/hooyoungzhang/article/details/52156758

版权

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文是JQuery权威指南的手抄学习笔记，涵盖了从引入JQuery文件到编写第一个入门代码，深入探讨JQuery的代码风格，并通过实例展示其简单应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引入JQuery文件

 <script  src="<%=basePath%>/js/jquery-1.8.3.js"></script>

2、第一个JQuery入门代码

$(function(){
    $('#div').css('color','red');
})

<div id="div">JQuery 入门</div>

$(document).ready(function(){})===$(function(){});

$(function(){})和window.onload区别：
1、执行时间不同：$(function(){})在页面框架下载完毕后就执行；而window.onload必须在页面全部加载（包含图片下载）后才能执行。
2、执行数量不同：$(function(){})可以写多个，并且每次执行结果不同；window.onload虽然也可以写多个，但仅输出最后一个执行结果，无法完成多个结果的输出。

3、JQuery程序的代码风格

1、无论是页面元素的选择，功能函数的前缀都使用$符号
2、事件操作链接式书写
例：$("#tip").html("Hello world").show(1000);

4、简单应用

1、访问DOM对象
<div id="Tep">测试文本</div>
<div id="Out"></div>
----------
var tDiv=$("#Tep");//获取JQuery对象
var oDiv=$("#Out");//获取JQuery对象
var cDiv=tDiv.html();//获取JQuery对象中的内容
2、控制Dom对象
var oTxtValue=$("#Text").val();
var oRdoValue=$("#Radio").is(":checked") "男":"女";
var oChkValue=$("#Check").is(":checked") "已婚":"未婚";
$("Tip").html(oTxtValue+oRdoValue+oChkValue);
3、控制css样式
$(".defcol").click(function(){
    $(this).toggleClass("curcol");
});