jQuery基础

迈不过友情╰ 2024-04-29 11:10 2阅读 0赞

## 学习目标： ##

能够搭建jQuery开发环境  
熟练掌握jQuery的语法  
jQuery操作页面元素的方法  
jQuery代码风格和规范

--------------------

## 学习内容： ##

## 1.搭建jQuery开发环境 ##

第一步：将jQuery开发版本的库文件拷贝到网页中。

获取：进入jQuery官网：http://jquery.com，获取jQuery库文件。  
第二步：在页面中引入jQuery库文件（可以放入head标签中）

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

## 2.$(document).ready()与window.onloa ##

$(document).ready()与window.onload类似，但也有区别

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>window.onload</td> 
   <td>$(document).ready()</td> 
  </tr> 
  <tr> 
   <td>执行时机：必须等待网页中所有的内容加载完毕后（包括图片。flash，视频等）才能执行</td> 
   <td>网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完</td> 
  </tr> 
  <tr> 
   <td>编写个数：同一页面不能同时编写多个</td> 
   <td>同一页面能同时编写多个</td> 
  </tr> 
  <tr> 
   <td>简化写法：无</td> 
   <td> <p>$(function(){ </p> <p>//执行daima</p> <p>})</p> </td> 
  </tr> 
 </tbody> 
</table>

## 3.jQuery语法结构 ##

语法：

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象。  
选择器 selector：获取需要操作的DOM 元素。  
action()：jQuery中提供的方法，其中包括绑定事件  
处理的方法。

## 3.jQuery操作页面元素 ##

jQuery操作页面元素的方法

使用addClass( )方法为元素添加样式  
使用css( )方法设置元素样式  
使用show( )、hide( ) 方法设置元素的显示和隐藏

### 3.1jQuery操作页面元素3-1 ###

语法

jQuery 对象.addCladd([样式名]);

示例

$("#current").addClass("current")

### 3.2jQuery操作页面元素3-2 ###

语法

css("属性","属性值") ;设置一个CSS属性
    css({"属性1":"属性值1","属性2":"属性值2"...}) ;设置多个CSS属性

示例

$(this).css({"background":"#c81623"});

### 3.3jQuery操作页面元素3-3 ###

设置元素的显示和隐藏

语法

$(selector).show();
    $(selector).hide();

示例

$(this).children("div").show();
    $(this).children("div").hide();

## 4.jQuery代码风格和规范 ##

### 4.1jQuery代码风格和规范4-1 ###

“$”等同于“ jQuery ”

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

链式操作  
隐式迭代  
注释  
DOM对象和jQuery对象

### 4.2jQuery代码风格和规范4-2 ###

链式操作：对一个对象进行多重操作，并将操作结果返回给该对象

$("h2").css("background-color","#ccffff").next().css("display","block");

### 4.3jQuery代码风格和规范4-3 ###

隐式迭代：对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，  
而 jQuery 在使用的时候则无需考虑这点。

jQuery 的方法内部存在隐式迭代，它会对匹配到的所有元素进行循环遍历，执行相应  
的方法；无需我们再手动地进行循，方便我们使用。

示例

$(function() {
            $("li").css({"font-weight":"bold","color":"red"});
        });

### 4.4jQuery代码风格和规范4-4 ###

添加注释

![c1bdd9bf2ec54317bb02cf08ab56a3c6.png][]

### 4.5jQuery代码风格和规范4-5 ###

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

var objDom = document.getElementById("title");
    var objHTML = objDOM.innerHTML;

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

$("#title").html( );
    等同于
    document.getElementById("title").innerHTML;

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

[c1bdd9bf2ec54317bb02cf08ab56a3c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/fbaf07759acc440d96887f091a482380.png

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery和$_jQuery基础

![73fdee308aa1c7cd09aa6532f967cb12.png][] jQuery简介 JavaScript是一种烦琐和复杂的语言。如果用JavaS

绝地灬酷狼/ 2023年01月10日 13:17/ 0 赞/ 119 阅读

相关 [jQuery-1] jquery基础

一、jQuery介绍 1. jQuery的定义 jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了

﹏ヽ暗。殇╰゛Y/ 2022年11月26日 06:52/ 0 赞/ 124 阅读

相关 jQuery基础

jQuery是一个使用原生js来封装常用方法的类库，解决了浏览器兼容问题 jQuery中提供的常用方法：核心、选择器、属性、筛选、CSS、文档处理、事件、效果（动画）、Aj

ゞ浴缸里的玫瑰/ 2022年06月07日 11:19/ 0 赞/ 288 阅读

相关 jQuery基础

使用jQuery操作的DOM DOM操作分类 1.DOM core:任何一种支持DOM的编程语言都可以使用。例如：getElementById() 2.HTM

深藏阁楼爱情的钟/ 2022年05月24日 04:35/ 0 赞/ 141 阅读

相关 jQuery基础

基本过滤选择器 > li:first 第一个li元素 > li:last 最后一个li元素 > even 偶数从0开始 > odd 奇数 > li:eq

àì夳堔傛蜴生んèń/ 2022年05月24日 04:07/ 0 赞/ 137 阅读

相关 jQuery基础

引入jQuery jQuery ：write less,do more 引入方式 <script src="jquery-3.3.1.min.js" ty

港控/mmm°/ 2022年05月24日 03:53/ 0 赞/ 183 阅读

相关 JQuery基础

jQuery语法结构 1、jQuery语法结构 $(selector).action() ; 工厂函数$()：将DOM对象

Love The Way You Lie/ 2022年04月18日 05:05/ 0 赞/ 238 阅读

相关 jquery基础

jquery基础更多文章欢迎访问个人博客 [www.herobin.top][] 在jQuery中 `$()` 方法等价于 `jQuery()` 方法，前者比较常用，

曾经终败给现在/ 2022年03月24日 15:50/ 0 赞/ 226 阅读

相关 jQuery基础

一、javascript调试程序的方法： 1、将变量或对象打印出来：alert(‘变量’) console.log(‘变量’) document.title = ‘变量’

我不是女神ヾ/ 2021年12月22日 12:49/ 0 赞/ 271 阅读

相关 jquery 基础

jQuery 是由美国人 John Resig 创建的一个JavaScript 的轻量级的框架，它能更方便的处理 HTMLdocuments、event，还能为网站提供 aja

约定不等于承诺〃/ 2021年11月01日 21:26/ 0 赞/ 286 阅读