【web】jquery使用心得

jquery是一个JavaScript库，容易学习，简化了JavaScript的编程。

一. 下载jquery库

使用这个库可以直接在web页中，从 jquery.com 的官网上引用 .js文件的链接地址。

也可以先将jquery库从官网上下载在本地后，再在使用的web页中，从本地目录下引用。

如果是要下载jquery库的话，从官网主页进入，点击download jquery能看到有3个链接，对于开发工作有用的是前两个链接。其中compressed的下载项包含的是压缩过的JavaScript代码，uncompressed表示的是未压缩的，后者更容易读，两者代码内容是一样的，形式上前者更简单。拷贝代码，在本地目录下新建 jquery.js 文件。

jQuery库地址： jquery.com

 

要使用jquery库时，在.html文件里引用自己的.js文件，需要在引用jquery.js文件之后进行。

 

二. 选择器

通过javascript的代码编辑来改变样式，根本改动仍然是代码转换到css进行的。用jQuery进行代码编写更加简便，几乎可以完全等换css操作。

1. 更改背景色

a.html

<div id="a">A</div>
<script src="E:\js\jquery.js"><\script>
<script src="E:\js\a.js"><\script>

a.js

jQuery('#a')        //#表示对象为id 
    .css('background','green');   

$('#a')
    .css('background','green');

jQuery在代码中可用$代替

2. 选择器

如1中所编写的$('#a')，括号中的#a可以是CSS中任意的选择器，例中是用的id选择器--#

div 元素选择器

$('div')
    .css('color','grey');

class  类选择器

$('.a')
    .css('color','green');

input  元素选择器

html中为 <input type="number">

$('input[type="nmber"]')
    .css('background','yellow');

选择器也是可以嵌套的：

a.js

$('#a p')
    .css('border','2px solid black'); //边框粗 像素，实线，黑色

a.html

<div id="a" >A
    <p>3</p> </div>    //嵌入
<script src="E:\js\jquery.js"></script>
<script src="E:\js\a.js"></script>

伪类操作：

选中第一个选择器，进行样式更改：

$('div:first')
    .css('border','2px solid pink');