码迷,mamicode.com
首页 > 编程语言 > 详细

JAVA技术分享:jQuery浅析

时间:2018-05-07 16:42:53      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:new   doctype   转换   har   其他   UNC   选中   oct   $()   

# jQuery浅析

## 一 jQuery概述

jQuery就是一个js库,里面封装了很多js的方法,相当于是一个外部的js文件。

### 1.快速入门

1) 导库

2)在scrpit中直接使用jquery即可。

```html
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    <script>
        $(
            function(){
                $("#span1").html("hello jquery!");
            }
        );
    </script>
```

### 2.jquery的页面加载函数(当页面加载完后执行的函数)

window.onload只能出现一个,并且后面的会覆盖前面的,但jquery的多个页面加载函数不会覆盖

jquery页面加载函数

```javascript
//方式一
jQuery(document).ready(function(){//....});
//方式二:
$().ready(function(){//....});
//方式三:常用
$(function(){
      //内容
});
```

### 3.jquery对象和dom对象之间的转换

- dom对象转换成jquery对象,就可以使用jquery对象中的属性和方法

```javascript
$(function(){
    var sp1 = document.getElementById("sp1");
//    sp1.innerHTML = "hello!";
    $(sp1).html("hello jquery!");
            
});
```

- jquery对象转换成dom对象,就可以使用dom对象中的属性和方法

```javascript
$(function(){
    $("#sp1").get(0).innerHTML = "hello!";
});
```

## 二、jquery的选择器

通过查看jquery文档可知,jquery的选择器有多种,常用的选择器如下:

## 1.基本选择器

- id选择器: 

```javascript
$("#btn1");
```

- 元素选择器

```javascript
$("div");
```

- 类选择器

```javascript
$(".mini");
```

- 所有元素

```javascript
$("*")
```

- 合并多个选择器

```javas
$("div,.mini");
```

## 2.层级选择器

- $("爷爷 后代"): 后代包括儿子和孙子
- $("爷爷 > 儿子"):只有儿子,没有孙子
- $("哥哥 + 弟弟"):弟弟必须是紧挨着哥哥的,其他的远房弟弟不算
- $("哥哥 ~ 弟弟"):弟弟可以不是紧挨着的,只有是同辈的。

## 3.基本过滤选择器

- first(): 选择第一个
- last():选择最后一个
- even: 选择索引是偶数的元素
- odd:选择索引是奇数的元素

## 4.属性选择器

- [属性]
- [属性=‘值‘]   

## 三、案例之省市二级联动

要想完成二级联动,就必须搞清jquery中each函数的用法。

each函数的语法格式:

$.each(数据集,回调函数(i,n)),其中i指的是每次循环的循环变量,n指的是每次循环对应的数据集中的元素。

省市二级联动的代码如下:

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                var cities = new Array();
                cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
                $("#province").change(function(){
                    $("#city").empty();
                    //1.获得当前select选中的value
                    var val = this.value;
                    //2.遍历数组,找到该省对应的所有的市的数组
                    $.each(cities,function(i,n){
                        if(val==i){
                            //找到相应的省
                            $.each(cities[i],function(j,m){
                                var tn = document.createTextNode(cities[i][j]);
                                var op = document.createElement("option");
                                $(tn).appendTo($(op));
                                $(op).appendTo($("#city"));
                            });
                        }
                    })
                });
            });
        </script>
    </head>
    <body>
        <select id="province">
            <option>--请选择--</option>
            <option value="0">湖北</option>
            <option value="1">湖南</option>
            <option value="2">河北</option>
            <option value="3">河南</option>
        </select>
        <select id="city">
        </select>
    </body>
</html>
```

JAVA技术分享:jQuery浅析

标签:new   doctype   转换   har   其他   UNC   选中   oct   $()   

原文地址:https://www.cnblogs.com/qfdsj/p/9003381.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!