JQuery学习笔记（1）

最新推荐文章于 2020-05-18 13:38:15 发布

Anthony_azy

最新推荐文章于 2020-05-18 13:38:15 发布

阅读量420

点赞数

分类专栏： AJax+JQuery

本文链接：https://blog.csdn.net/a2459956664/article/details/53741250

版权

AJax+JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery框架

① jquery是一个javascript框架/javascript 库

使用jquery中有两种对象

dom , jquery对象

<inputtype="text" id="abc"/>

dom=> vardom1=document.getElementById('abc')

jquery=> var obj2= $('#abc');

为什么出现 javascript框架?

比如: 为了获取 id 对应对象

document.getElementById('id号');

为了获取标签名获取对象

document.getElmentsByTagName("tagname");

如果使用框架

$('#id')$('.classname')

如果使用jquery框架发送 ajax请求

Jquery.send(..);

得出结论是: 使用js框架可以提高我们开发js的效率

② write less do more

③ jquery是一个轻量级的js库，给使用者提供一系列的函数

④ 目前流行的js库有:

1. jquery 2. extjs 3. prototype 4. dwr(运行服务器) 5. dojo

如何在zend studio 安装一个插件(apatana)可以提示js的函数和属性,目前这个工具很流行

下面我演示如何安装

① 先下载aptana插件 www.aptana.org

② 安装的方式有两种

在线安装(推荐)

离线安装 (首先下载插件包)

1. help->software->find and install->search for new featrue ..->new archived site->选中你的aptana.zip->finish->选中aptana zip复选框

如果提示某个jar安装不成，则去掉这个jar选项

安装时，大概3分钟.

快速入门案例

1. 使用jquery开发在网页打开是，提示一句话: "hello,world"!

<scripttype="text/javascript"src="jquery-1.3.1.js"></script>

//$(document)是一个jquery 对象

//document是dom对象

$(document).ready(function(){

window.alert('hello,world');

}

);

</script>

☞ 在使用jquery开发中，有两种对象1. jquery对象 2. dom对象, 如果是jquery对象则只能使用jquery库提供的方法, 如果是dom对象，则只能使用 js本身提供的方法.

分析一下，为什么可以使用jquery方法?

<script type="text/javascript">

function Dog(){

}

Dog.prototype={

ready:function(){

window.alert('ok');

}

var dog1=new Dog();

dog1.ready();

</script>

什么jquery对象

jquery对象就是对dom对象进行包装，这样就可以使用jquery的方法, jquery对象和dom对象可以相互转换,方法是:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Inserttitle here</title>

<scripttype="text/javascript"src="js/jquery-1.3.1.js"></script>

<scripttype="text/javascript">

//说明jquery对象和dom对象区别

functiontesting(){

//使用传统的方法来获取test

//obj1是dom对象

varobj1=document.getElementById("test");

window.alert(obj1.value);

//如果是jquery对象,规定一个jquery对象名是 $开头

var $obj2=$('#test');

alert($obj2.val());

//他们之间是否能够相互转换.

//dom->jquery

//var $obj3=$(obj1); //$(document).ready()..

//window.alert($obj3.val());

//jquery->dom对象?

//在jquery开发中，把一个对象当做集合处理

//有两种方法.1.

varobj4=$obj2[0]; //obj4就是dom

比如:

<inputid="aa" type="text"/>

var $obj=$('#aa');

$obj[0]

//现在

alert("obj4 valu="+obj4.value);

//第二种方法把jquery->dom

varobj5=$obj2.get(0);

alert("obj5 val="+obj5.value)

}

</script>

</head>

<body>

<inputtype="text" id="test" value="test"/>

<inputtype="button" οnclick="testing()" value="点击" />

</body>

</html>

jquery的选择器

jquery为什么这么流行?

1. 基本选择器

1.1 class

var $objs=$('.class名')

$objs.css("grounback","red");
1.2 id

var $obj=$("#id名");

1.3element

var $objs=$("input") =>document.getElementsByTagName("tag名");

1.4通配符

var $objs=$("*");

1.5[选择器的组合..]

var $objs=$("input,a,#id名,.class名")

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<metahttp-equiv="content-type" content="text/html;charset=UTF-8">

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value="改变元素名为 <div> 的所有元素的背景色为#00FFFF" id="b3"/>

<input type="button" value="改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>

div id为one

</div>

div id为two

</div>

div id为three

</div>

span one

</span>

spantwo

</span>

</body>

<scriptlanguage="JavaScript">

//************改变 id 为 one 的元素的背景色为#0000FF***********

/*function abc(){

document.getElementById("one").style.background="#0000FF";

}*/

//jquery的id选择器去和按钮绑定一个事件

//$('#b1')表示选中 b1这个控件

//$('#b1').click 给b1这个按钮绑定 click事件

//function(){

// window.alert('yes');

//} 表示点击b1按钮时，究竟做什么

$('#b1').click(

function(){

$('#one').css("background","#0000FF");

}

);

//*****改变 class 为 mini 的所有元素的背景色为 #FF0033

$('#b2').click(

function (){

$('.mini').css("background","#FF0033");

}

);

//******改变元素名为<div> 的所有元素的背景色为 #00FFFF

$('#b3').click(

function (){

$('div').css("background","#00FFFF");

}

);

//******改变所有元素的背景色为#00FF33

$('#b4').click(

function(){

$("*").css("background","#00FF33");

}

);

//*****改变所有的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF

$('#b5').click(

function(){

//??

$('span,#two,.mini').css("background","#3399FF");

}

)

//***********end*************

</script>

</html>

练习案例:

代码:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Inserttitle here</title>

<scripttype="text/javascript"src="js/jquery-1.3.1.js"></script>

</head>

<body>

<scripttype="text/javascript">

$('p').click(

function(){

//this表示当前被点击元素，但是此时我们当做dom对象

//window.alert(this.innerHTML);

//$(this) 表示当前被点击元素，但是此时我们当做jquery对象

window.alert($(this).html());

//window.alert('ok');

}

);

</script>

</body>

</html>

层次选择器的

1. 祖先后台

$("bodydiv"); 表示把body下的所有的div选中.

1. prev + next 表示选择 prev 的下一个元素 (强调：同一级后面的兄弟,只是一个.)

2. prev ~ siblings 表示选择 prev 的后面所有元素(强调：同一级,后面所有的兄弟)

代码:

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<metahttp-equiv="content-type" content="text/html;charset=UTF-8">

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value="改变 <body> 内所有<div> 的背景色为 #0000FF" id="b1"/>

<input type="button" value="改变 <body> 内子<div> 的背景色为 #FF0033" id="b2"/>

<input type="button" value="改变 id 为 one 的下一个<div> 的背景色为 #0000FF" id="b3"/>

<input type="button" value="改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>

<input type="button" value="改变 id 为 two 的元素所有<div> 兄弟元素的背景色为 #0000FF" id="b5"/>

div id为one

</div>

div id为two

idtwoo1

</div>

idtwoo2

</div>

div id为three

idthree01

</div>

span one

</span>

spantwo

</span>

</body>

<scriptlanguage="JavaScript">

//*******改变 <body> 内所有 <div> 的背景色为#0000FF

$('#b1').click(function(){

$('div').css("background","#0000FF");

})

//*******改变<body> 下 <div> 的背景色为#0000FF

$('#b2').click(function(){

$('body> div').css("background","#0000FF");

})

//改变 id 为 one 的下一个 <div> 的背景色为#0000FF(选择一个)

$('#b3').click(function(){

$('#one+ div').css("background","#0000FF");

})

//*******改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 ##0000FF

$('#b4').click(function(){

$('#two~ div').css("background","#0000FF");

})

//****改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为#0000FF

$('#b5').click(function(){

$("#two").siblings("div").css("background","#0000FF");

})

</script>

</html>

过滤选择器

sql: select * from表名 where id=100

① 基础过滤选择器

所有的案例如下:

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<metahttp-equiv="content-type" content="text/html;charset=UTF-8">

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id为one

</div>

div id为two

idtwoo1

</div>

idtwoo2

</div>

div id为three class one

idthree01

</div>

执行动画

</div>

span one

</span>

spantwo

</span>

</body>

<scriptlanguage="JavaScript">

//函数

function ca(){

$("#mover").slideToggle("slow",ca);

}

//调用

ca();

//*****改变第一个 div 元素的背景色为 #0000FF

$('#b1').click(

function(){

//$('div:first').css("background","#0000ff");

$("div:eq(0)").css("background","#0000ff");

}

);

//*****改变最后一个 div 元素的背景色为 #0000FF

//所谓最后一个指的是是从上到下，从左到右去搜，最后的一个

$('#b2').click(

function(){

$('div:last').css("background","#0000ff");

}

);

//***改变class不为 one 的所有 div 元素的背景色为#0000FF

$('#b3').click(

function(){

//先选择所有div,然后再过滤(select mysql )

$("div:not(.one)").css("background","#0000ff");

}

);

//********改变索引值为偶数的div 元素的背景色为 #0000FF

$('#b4').click(

function(){

//:表示过滤

$("div:odd").css("background","#0000ff");

}

);

//5

//*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

$('#b6').click(

function(){

$("div:gt(3)").css("background","#0000ff");

}

);

//改变索引值为等于 3 的 div 元素的背景色为 #0000FF

$('#b7').click(

function(){

$("div:eq(3)").css("background","#0000ff");

}

);

//**改变索引值为小于 3 的 div 元素的背景色为 #0000FF

$('#b8').click(

function(){

$("div:lt(3)").css("background","#0000ff");

}

);

//****改变所有的标题元素的背景色为#0000FF

$('#b9').click(

function(){

$(":header").css("background","#0000ff");

}

);

//***改变当前正在执行动画的所有元素的背景色为 #0000FFF

$('#b10').click(

function(){

//怎么样吧颜色在重新找回的.

$(":animated").css("background","red");

}

);

</script>

</html>

练习

代码:

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Inserttitle here</title>

<scripttype="text/javascript"src="js/jquery-1.3.1.js"></script>

</head>

<body>

<h1>第一个表格</h1>

</table>

<h1>第二个表格</h1>

<tableborder="1" width="400px">

</table>

<scripttype="text/javascript">

$("table:eq(0)tr:even").css("background","red");

$("table:eq(0)tr:odd").css("background","blue");

//第二个表格

$("table:eq(1)tr:even").css("background","green");

$("table:eq(1)tr:odd").css("background","yellow");

</script>

</body>

</html>

代码

内容选择器

根据内容来选择你需要的元素

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<metahttp-equiv="content-type" content="text/html;charset=UTF-8">

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id为one

</div>

div id为two

idtwoo1

</div>

idtwoo2

</div>

div id为three class one

idthree01

</div>

XXXXXXXXXX

</div>

</div>

执行动画

</div>

span one

</span>

spantwo

</span>

</body>

<scriptlanguage="JavaScript">

//********改变含有文本 ‘di’ 的 div 元素的背景色为#0000FF

$('#b1').click(function(){

$("div:contains('di')").css("background","#0000ff");

})

//**************改变不包含子元素(或者文本元素) 的 div 的背景色为 #0000FF

$('#b2').click(function(){

$("div:empty").css("background","red");

})

//******改变含有 class 为 mini 元素的 div 元素的背景色为#0000FF

$('#b3').click(function(){

//这个是元素本身

$("div:.mini").css("background","green");

//这个元素它父元素

//$("div:has('.mini')").css("background","green");

})

//****改变含有子元素(或者文本元素)的div元素的背景色为#0000FF

$('#b4').click(function(){

//这个是元素本身

$('div:parent').css("background","yellow");

})

//*****改变不含有文本 di;的 div 元素的背景色

$('#b5').click(function(){

//这个是元素本身

$("div:not(contains('di'))").css("background","red");

})

//****改变索引值为大于 3 的 div 元素的背景色为 #0000FF

$('#b6').click(function(){

//这个是元素本身

$("div:gt(3)").css("background","#0000ff");

})

//***

</script>

</html>

可见度选择器

该选择器，是根据元素的可见性来选择对象

有两种

:hidden

$(:hidden) =>会style[display:none] <inputtype="hidden"/>

:visible

$(:visible)=>

☞ 在 jquery中提供了一个 each来遍历我们的对象和数组(这个非常重要)

//如何使用 each对数组遍历

Anthony_azy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录