分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jQuery基础应用

发布时间:2023-09-06 01:13责任编辑:蔡小小关键词:jQuery

什么是 jQuery ?

jQuery是一个JavaScript函数库。

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

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

提示: 除此之外,Jquery还提供了大量的插件。

jQuery 语法

  • 美元符号定义 jQuery
  • 选择符(selector)"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

1,使用jQuery必须先导入jQuery,x.x.x.js文件
2,jQuery中的选择器:
?$("选择器").函数();
?①$是jQuery的缩写,即可以使用jQuery("选择器").函数();
?②选择器,可以是任何CSS支持的选择符

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

实例

用户点击按钮后,所有 <p> 元素都隐藏:

$(document).ready(function(){ ?$("button").click(function(){ ???$("p").hide(); ?});});

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:

$("#test")

实例

当用户点击按钮后,有 id="test" 属性的元素将被隐藏:

$(document).ready(function(){ ?$("button").click(function(){ ???$("#test").hide(); ?});});

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下:

$(".test")

实例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏:

$(document).ready(function(){ ?$("button").click(function(){ ???$(".test").hide(); ?});});

3,文档就绪函数,防止在文档未完全加载之前,运行jQuery代码,

$(document).ready(function(){ ????????jQuery代码});


??简写形式:

$(function(){ });


【文档就绪函数和window.onload区别】
①window.onload必须等到网页中所有内容执行完后,才会加载代码。(包括图片,视频等资源)
文档就绪函数,只需要在网页DOM结构加载完毕之后,就可以执行代码。
②window.onload只能写一个,写多个只会执行最后一个。
文档就虚函数可以写多个,并且不会被覆盖。

4,原生JS对象与jQuery对象
①使用$("")选中的时jQuery对象,只能调用jQuery的函数,而不能使用元素JS的事件与函数

$("#p").click;√$("#p").onclick = function(){} ×

解释:$("#p")是jQuery对象。 .onclick是原生JS事件
???同理:使用document.getElement获取的是原生JS对象,也不能使用jQuery相关函数。
②原生JS对象转为jQuery对象
???可以使用$()包裹原生JS对象,即可转为jQuery对象。

var p = document.getElementByTagName("p");

$(p).click(); √原生JS对象p已被转为jQuery对象。
③jQuery对象转为原生JS对象,使用.get(index)或[index] ?

$("#p").get(0).onclick = function(){} $("#p").[0].onclick = function(){}

5,jQuery解决多库冲突
?由于其他的库也会使用$作为自身标识,导致其他JS库与jQuery冲突;
?要解决冲突,可以放弃使用$,直接使用jQuery对象。
【使用自执行函数传入jQuery对象简化写法】

jQuery.noConflict();//调用这个函数,将$控制权让渡给其他类库,即jQuery不能再使用$!function(j){ ??????函数之中就可以用字母j。代替jQuery对象}(jQuery);

jQuery基础应用

原文地址:http://www.cnblogs.com/liuqiang1109/p/7588894.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved