【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>

此后所有的示例中，.html文件内容都类似此文件。
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="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');

三. 过滤器
1.
类可以层层包括；同类可以有不同id：
b.html

<div class="grandpa">
	<div class="pa">
			<div id="c1" class="child"></div>
			<div id="c2" class="child"></div>
	</div>
</div>

b.js

$('div .child')  //找到child类的div

//$('div')
	.find('.child') //同上作用

例下，过滤后更改样式：
b.html

<style>
  div {
    padding:2px;    //内边距宽度
    margin-bottom:2px;   //下外边距
    background:rgba(0,0,0,.1);   //0.1为透明度
  }
</style>

  <div class="grandpa">
  <div class="pa">
    <div id="c1" class="child">c1</div>
    <div id="c2" class="child">c2</div>
  </div>
</div>
<script src="E:\js\jquery.js"></script>
<script src="E:\js\jq\main.js"></script>

b.js

    $('div')
    	.find('.child')
    	.css('border','2px solid pink');

//$('.grangdpa')    //与上等价，不必从div开始找，可以从外层的类开始。
	.find('.child')

也可以从内向外找：

  $('#c1')
  	.parent()          //找到选中 pa 类，往上找一级
  	.css('border','2px solid blue');

$('#c1')
	.parents('.grandpa')   //往上找，只要有给定的父类就选中
	.css('.border','2px solid grey');

2.过滤
同一个元素选择器，可以同时有几个类，表达形式如：
b.html

<div class="child student"></div>  //空格隔开

可以在同类中过滤：

//.html
<div class="grandpa">
  <div class="pa">
    <div id="c1" class="child n">c1</div>
    <div id="c2" class="child">c2</div>
    <div id="c3" class="child">c3</div>
  </div>
</div>

//.js
$('.child')
  .filter('.n')    //只选中 n 类
  .css('background','pink');

四. 样式
1.一个类的多种样式
在一个类中想添加多种样式，两种方式：

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

//1. 多次添加
$('.a')
  .css('background','grey')
  .css('color','pink');

//2. 列表添加
$('.a')
  .css({
    color:'pink',
    background:'grey',
  });

ps：对于连字符，可以有两种处理，避免报错：①使用连字符，但外加单引号，使其被处理时当做字符串。②不使用连字符，驼峰命名法，第二个有意义的词开始大写首字母。
2. 运用样式表
可以在样式表里先写好样式。

<style>
  .black{                         //样式
    background:red;
    color:yellow;
  }
</style>
<div class="a">A</div>
<script src="E:\js\jquery.js"></script>
<script src="E:\js\jq\main.js"></script>

$('.a')
  .addClass('black');      //增加样式