（MC嘉）jQuery基础使用与样式篇

jQuery基础使用与样式篇

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：曾维嘉

撰写时间：2020年05月02日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示：除此之外，jQuery还提供了大量的插件

1.2 如何使用jQuery

jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，通过<script>标签引入jQuery库即可

1.3 jQuery的语法

jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法：$(selector).action();

- $美元符号定义jQuery

- selector 选择符需要查找的元素支持css1~css3中的主流选择器

- action() 执行对元素的操作

例如：

$("p").hide();//隐藏所有 <p> 元素

$(".box").hide();

jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，

为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

我们使用jQuery的同时也能混合JavaScript原生代码一起使用。

在很多场景中，我们需要jQuery与DOM能够相互的转换，

它们都是可以操作的DOM元素，jQuery是一个类数组对象，

而DOM对象就是一个单独的DOM元素。

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，

通过传递不同的参数而产生不同的作用。

如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

1.DOM对象转换为jQuery对象

var box = document.getElementById("box");//DOM对象

$(box);//jQuery对象

2.jQuery对象转换为一个DOM对象

var $divs=$("div");//jQuery对象 divs中包含所有的$divs元素

var div=$divs[0];//div为DOM对象

使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

$(document).ready(function () {

通过原生的JS代码获取DOM对象

var box = document.getElementById("box");//dom对象

console.log(box);

var jqBox = $(box);//jquery对象

console.log(jqBox);

var $box = $("#jqBox");//jQuery中的对象

var div = $box[0];//DOM对象

var div = $box.get(0);//DOM对象

console.log(div);

})

（MC嘉）jQuery基础使用与样式篇相关推荐

jQuery基础----修改CSS样式
前面聊了很多选择器什么,现在聊一些使用方法,当然也是常用的方法,而不是全部的方法,毕竟官网文档很多. 然后看了官网api资源共享都是积分的,打算上传一份免费大家使用,但是不让上传说是资源重复(无语). ...
jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
慕课笔记：jQuery（一）——样式篇
1,jQuery对象和DOM对象之间的转换把DOM对象转换为jQuery对象: var div = document.getElementsByTagName('div'); //dom对象 var ...
jQuery基础修炼圣典—DOM篇（二）jQuery遍历
1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...
原 jQuery基础修炼圣典—DOM篇
2019独角兽企业重金招聘Python工程师标准>>> 6.JQuery遍历 (7)siblings()方法如果想快速查找指定元集合中每一个元素紧邻的前面后面同辈元素,此时可以用s ...
背景裁剪图片html,HTML5基础加强css样式篇（文本裁剪,背景裁剪：background-origin，background-position，background-clip）（三十七）...
1.背景定位: .box { /* .box 默认样式 */ margin: 200px 0 0 200px; width: 200px; height: 200px; background-imag ...
前端开发学习路径之阶段四：jQuery基础篇
jQuery基础总共分为四个部分,分别是样式篇.事件篇.动画篇.DOM篇. 一.样式篇 1.jQuery选择器 1.1.1 jQuery选择器之id选择器 id选择器:一个用来查找的ID,即元素的id ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...

（MC嘉）jQuery基础使用与样式篇

jQuery基础使用与样式篇

（MC嘉）jQuery基础使用与样式篇相关推荐

最新文章

热门文章