Jquery的入门(一)
Jquery介绍
Jquery是一个快速,简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或者是JavaScirpt框架),Jquery设计的宗旨是:write less,Do More 即倡导写更少的代码,做更多的事情.
它封装饿了JavaScirpt常用的功能代码,提供了一种渐变的javascript设计模式,优化HTML文档操作,事件处理,动画设计和AJAX交互,Jquery实现了跨越浏览器,开发者不需要关注浏览器的兼容性了,但是从2.0开始,不再兼容IE6.7.8
Jquery的基本使用方式
页面中引入Jquery文件
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
</script>
首先调用jQuery中的核心函数,函数的名就是jquery,在此函数的参数中传递匿名函数,这个匿名函数将在页面加载完成后执行,同时函数名jquery可以简写为$.
同时$也是jquery中的选择器,可以查找页面中的标签元素.
<sctipt type="text/javascript">
jQuery(function(){
alert("jquery!");
});
$(function(){
alert("jquery!!");
})
</sctipt>
DOM对象转成JQuery对象
Dom对象和jquery对象相互是不通用的,也就是说document.gtxxx()获取到的元素,属于DOM对象,只能调用Dom对象中提供的方法和属性.而使用$("xx")获取到的元素属于JQuery对象,只能调用Jquery对象的方法.
<script type="text/javascript">
function fn() {
var name = document.getElementById("name");
//dom对象属性
alert(name.value);
//jQuery对象函数
var $name = $("#name");
alert($name.val());
}
</script>
将DOM对象转成jquery对象,使用$包裹即可.
var $jquery = $(dom对象)；
jquery对象转成DOM对象
jquery对象的本质是数组,而数组中的每个元素是DOM对象,将jquery对象转成DOM对象,使用数组的素银,取出数组中的元素即可.
var dom = $jquery[0];
jquery选择器
jquery的选择器与css的选择器的作用是完全一样的,目的是精确快速的定位到某个html元素上并获取该元素对象,进而使用jquery的方法对该html进行操作.
jquery常用的选择器有如下几个:基本选择器,基本过滤选择器.属性选择器,表单属性选择器.层级选择器等.
基本选择器
标签选择器(元素选择器):$("html标签名")
id选择器;$("#id的属性值")
类选择器:$(".class的属性值")
<script type="text/javascript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 红色"
id="b1"/>
//id选择器找到id值为b1的按钮,绑定点击事件
$("#b1").click(function(){
//id选择器为one的标签,jquery的css方法设置样式
$("#one").css("background-color","#FF0000");
});
// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色
为 红色" id="b2"/>
//id选择器b2的按钮,绑定点击事件
$("#b2").click(function(){
//获取所有div标签,使用标签选择器
$("div").css("background-color","#FF0000");
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色
为 红色" id="b3"/>
$("#b3").click(function(){
//class选择器,选择class为mini
$(".mini").css("background-color","#FF0000");
});
// <input type="button" value=" 改变所有的<span>元素和 id 为 two
的元素的背景色为红色" id="b4"/>
$("#b4").click(function(){
//获取标签span,和id值是two的元素
//多选择器逗号分割
$("span,#two").css("background-color","#FF0000");
});
</script>
层级选择器
获得A元素内部的所有的B元素：$("A B ") --- 后代选择器
获得A元素下面的所有B子元素：$("A > B")
获得A元素同级下一个B元素：$("A + B")
获得A元素同级所有后面B元素：$("A ~ B")
<script type="text/javascript">
//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为
红色" id="b1"/>
$("#b1").click(function(){
//选择所有body的后代div标签,层级选择器
$("body div").css("background-color","#FF0000");
})
//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为
红色" id="b2"/>
$("#b2").click(function(){
//选择body的子标签div
$("body>div").css("background-color","#FF0000");
});
//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的
背景色为 红色" id="b3"/>
$("#b3").click(function(){
//id为one的下一个div
$("#one+div").css("background-color","#FF0000");
});
//<input type="button" value=" 改变id为two 的元素后面的所有兄弟<div>的元素的
背景色为 红色" id="b4"/>
$("#b4").click(function(){
//id为two后的所有兄弟div
$("#two~div").css("background-color","#FF0000");
});
//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元
素的背景色为红色" id="b5"/>
$("#b5").click(function(){
//siblings方法,选择所有的同级标签
//$("#two").siblings().css("background-color","#FF0000");
//siblings方法继续选择
$("#two").siblings("div").css("background-
color","#FF0000");
});
</script>
属性选择器
获得有属性名的元素：$("A[属性名]")
获得属性名 等于 值 元素：$("A[属性名=值]")
复合属性选择器，多个属性同时过滤：$("A[属性名!=值][属性名!=值][属性名!=值]")
<script type="text/javascript">
//<input type="button" value=" 含有属性title 的div元素背景色为红
色" id="b1"/>
$("#b1").click(function(){
//属性选择器,选择带有title
$("div[title]").css("background-color","#FF0000");
});
// <input type="button" value=" 属性title值等于test的div元素背景色
为红色" id="b2"/>
$("#b2").click(function(){
//获取属性值是test的元素
$("div[title='test']").css("background-
color","#FF0000");
});
// <input type="button" value="选取有属性id的div元素，然后在结果中
选取属性title值是“tees”的 div 元素背景色为红色" id="b3"/>
$("#b3").click(function(){
//有id属性，并且title属性值是test
$("div[id][title='tees']").css("background-
color","#FF0000");
});
</script>
基本过滤选择器
不包括指定内容的元素例如： :not(selecter)
偶数，从 0 开始计数： :even
奇数，从 0 开始技术： :odd
指定第几个： :eq(index)
大于n个： :gt(index)
小于n个： :lt(index)
获得标题 （ <h1> /<h2> .... ） :header --- 固定写法
获得动画的 :animated ---固定写法 正在执行的动画
<script type="text/javascript">
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为
红色" id="b1"/>
$("#b1").click(function(){
$("div:not(.one)").css("background-color","#FF0000");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"
id="b2"/>
$("#b2").click(function(){
$("div:even").css("background-color","#FF0000");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"
id="b3"/>
$("#b3").click(function(){
$("div:odd").css("background-color","#FF0000");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红
色" id="b4"/>
$("#b4").click(function(){
$("div:gt(3)").css("background-color","#FF0000");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红
色" id="b5"/>
$("#b5").click(function(){
$("div:eq(3)").css("background-color","#FF0000");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红
色" id="b6"/>
$("#b6").click(function(){
$("div:lt(3)").css("background-color","#FF0000");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色"
id="b7"/>
$("#b7").click(function(){
$(":header").css("background-color","#FF0000");
});
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红
色" id="b8"/>
$("#b8").click(function(){
$(":animated").css("background-color","#FF0000");
});
function moveFn(){
//div向上滑动, slideUp方法,slideToggle方法
$("#mover").slideToggle("slow",function(){
moveFn();
});
}
moveFn();
</script>
表单属性选择器
可用： :enabled
不可用： :disabled
选中（单选radio ，多选checkbox）： :checked
选择（下列列表 <select> ）： :selected
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用
<input> 元素的值" id="b1"/>
$("#b1").click(function(){
//获取多个input标签属性值是 enabled, type属性值是text 返回数组
var $inputs = $("input[type='text']:enabled");
for(var i=0;i<$inputs.length;i++){
//把数组中的DOM对象变成Jquery对象,调用方法val()
alert($($inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可
用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//获取多个input标签属性值是disabled,返回数组
var $inputs = $("input[type='text']:disabled");
for(var i=0;i<$inputs.length;i++){
//把数组中的DOM对象变成Jquery对象,调用方法val()
alert($($inputs[i]).val());
}
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选
中的个数" id="b3"/>
$("#b3").click(function(){
var $inputs = $("input[type='checkbox']:checked");
alert($inputs.length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选
中的内容" id="b4"/>
/*
* html()==DOM对象的innerHTML
* text()==DOM对象的innerText
*/
$("#b4").click(function(){
var $inputs = $("option:selected");
for(var i=0;i<$inputs.length;i++){
alert($($inputs[i]).text());
}
});
jQuery的DOM方法操作
文本/值操作：html(),text(),val()
html() === innerHTML
text() === innerText
val() === value
html text val 传递参数代表赋值 空参代表获取
<script type="text/javascript">
//页面加载完成
$(function(){
//获取张三
alert($("#myinput").val());
//获取标题文本
alert($("#mydiv").text());
//获取mydiv的后的所有内容
alert($("#mydiv").html());
});
</script>
属性操作：attr(),prop()
attr() === setAttribute和getAttribute
attr(属性名称); --- 获取属性的值
attr(属性名称,属性值) --- 设置的属性的值
<script type="text/javascript">
//获取北京节点的name属性值
alert($("#bj").attr("name"));
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
alert($("#hobby").prop("checked"));
/*
* JQuery1.6版本后的方法prop
* checked,selected使用prop 单属性
* 其他属性使用attr
*/
</script>
css操作：addClass(),removeClass(),css()
addClass（值） === attr(“class”,值)
removeClass（class值） === removeAttr（“class值”）
css() ==== js对象.style.属性
css(css属性名) 获取css属性名称对应值
css(css属性名,值) 设置css样式
<script type="text/javascript">
//<input type="button" value="采用属性增加样式(改变id=one的样式)"
id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass();
});
//<input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function(){
//toggleClass切换样式方法,如果没有样式,设置样式second,如果存在
second样式,则还原
$("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色"
id="b5"/>
$("#b5").click(function(){
alert($("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿
色" id="b6"/>
$("#b6").click(function(){
$("#one").css("background-color","#00FF00");
});
</script>
元素创建/内部插入
$( "<li></li>" )创建标签li
append() 追加子节点
prepend() 追加子节点，在最前
remove() 移除节点
empty() 清空所有子节点
<script type="text/javascript">
/**将反恐放置到city的后面*/
$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#city").empty();
//测试(id='city')并没有被删除
</script>
jquery的效果
元素的显示与隐藏
show(speed ,fn) 显示参数 speed，显示速度，单位：毫秒。固定字符串：slow, normal, or
fast参数 fn，显示成功之后回调函数。
hide() 隐藏
toggle() 切换
元素的滑动显示与隐藏
slideDown() 显示，高度变大。
slideUp() 隐藏，高度变小。
slideToggle() 切换
元素的淡入淡出的显示与隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
表格隔行变色案例
<script type="text/javascript">
$(function(){
$("tr:gt(1):even").css("background-color","#CC66FF");
$("tr:gt(1):odd").css("background-color","#CC6600");
});
</script>
全选和全不选案例
<script type="text/javascript">
function selectAll(obj){
$("input[class='itemSelect']").prop("checked",$(obj).prop("checked"));
}
</script>
定时广告案例
<script type="text/javascript">
$(function(){
setTimeout(function(){
//$("#adDiv").css("display","block");
$("#adDiv").slideDown(3000);
},3000);
setTimeout(function(){
//$("#adDiv").css("display","none");
$("#adDiv").slideUp(3000);
},8000);
});
</script>
Jquery的入门(一)的更多相关文章
- JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- 极客技术专题【007期】：jQuery初学者入门 - jQuery Event
日期:2013-8-19 来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...
- jQuery Mobile 入门基础教程
jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...
- jQuery的入门与简介
jQuery的入门与简介<思维导图> <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- 第一百九十一节，jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
- day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
- jQuery简单入门
jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...
随机推荐
- Python界面常用GUI包
作为Pyhon开发者,你迟早都会碰到图形用户界面(GUI)应用开发任务,这时候我们就需要一些界面库来帮助我们快速搭建界面,python的界面库很多,我认识的并不多,这里只列出几种我认识的 1.tkin ...
- 第2/7Beta冲刺
1.团队成员 成员姓名 成员学号 秦裕航 201731062432(组长) 刘东 201731062227 张旭 201731062129 王伟 201731062214 2.SCRU部分 2.1各成 ...
- 12 Cookie、Session和JSP基础
1.会话技术 (1)会话概念:一次会话中包含多次请求和响应.一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 (2)会话功能:在一次会话的范围内的多次请求间,共享数据 (3)会 ...
- Tomcat是一个Servlet容器？
"Tomcat是一个Servlet容器",这句话对于2019年的程序员应该是耳熟能详的. 单纯的思考一下这句话,我们可以抽象出来这么一段代码: class Tomcat { Lis ...
- 1.RabbitMQ工作模型与基本原理
1.了解 MQ 的本质和 RabbitMQ 的特性: 2.掌握 RabbitMQ 的 Java API 编程和 Spring 集成 RabbitMQ 1. MQ 了解 1.1. 消息队列简介 ...
- 解决SQL server 18740、18456登录失败问题
第一步:使用window管理员用户登录SQL server 第二步:如下图步骤(开始配置sa默认用户) 第三步:选择角色类型 第四步:选择和配置用户映射的数据库 第五步:授予允许连接,并开启登录权限 ...
- Linux 打包和压缩
常用的打包压缩方式 windows常用rar mac常用zip linux常用tar.gz 打包/解包 tar是linux中最常用的备份工具,此命令可以把一系列的文件打包到一个大文件中,也可以把一个打 ...
- 3.NioEventLoop的启动和执行
NioEventLoop启动和执行 NioEventLoop启动 在服务端启动的代码中,我们看到netty在注册和绑定时,判断了当前线程是否是NioEventLoop线程.如果不是, 则将这些操作包装 ...
- GitHub预览网页[2019最新]
GitHub预览网页 1. 创建仓库 2. 设置页面预览 3. 上传html 4. 访问网页 1. 创建仓库 登陆GitHub创建仓库 datamoko 添加基本信息: 仓库名.仓库描述,然后点击创建 ...
- 【开发笔记】- MD5加密
主要用于对用户密码的加密,保护用户账户安全: /** * @author shenruihai * */ import java.security.MessageDigest; import org. ...