jQuery学习1

最新推荐文章于 2021-06-12 22:38:41 发布

人生任命

最新推荐文章于 2021-06-12 22:38:41 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/weixin_45157597/article/details/101385015

版权

1.jQuery介绍

什么是jQuery?

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery特点：

用CSS选择来筛选元素
链式语法
基于方法
支持json解析

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

2.jQuery基础

jQuery引用


<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

js对象和jQuery对象互转

js对象转换jQuery对象$(js对象) $(this)
jQuery对象转换js对象jQuery对象[0]

jQuery 语法

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery 选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

标签选择器

$("p")

#id 选择器

$("#test")

.class 选择器

$(".test")

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

jQuery 事件

jQuery 事件方法语法

$("p").click();

jQuery常用事件

1.当DOM载入就绪可以查询及操纵时绑定一个要执行的函数


$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

//简写

$(function(){
 
   // 开始写 jQuery 代码...
 
});

2.on(); 在选择元素上绑定一个或多个事件的事件处理函数


  	$("p").on("click",function(){
    	alert("段落被点击了。");

3.off(); 与on();相反的, 在选择元素上移除一个或多个事件的事件处理函数

$("button").click(function(){
   $("p").off("click");
});

4.one(); 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
  alert( $(this).text() );

5.click(); 触发每一个匹配元素的click事件,也就是鼠标点击事件

$("p").click(function(){
  $(this).hide();
});

jQuery 效果

方法	描述
show()	显示被选元素
hide()	隐藏被选元素
toggle()	hide() 和 show() 方法之间的切换
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
animate()	对被选元素应用"自定义"的动画

jQuery实例

jQuery实现三级地址联动

具体实现

var provinces =['山西','山东','河南','河北'];

var cities = [
    ['太原','晋中','大同','阳泉'],
    ['济南','青岛','威海'],
    ['郑州','洛阳'],
    ['石家庄','保定']
];

var areas = [
    [
        ['小店','迎泽','杏花岭','尖草坪'],
        ['榆次','左权','寿阳'],
        ['左云'],
        ['平定','盂县']
    ],
    [
        ['济南地区1','济南地区2'],
        ['青岛地区1','青岛地区2'],
        ['威海地区1','威海地区2'],
    ],
    [
        ['郑州地区1','郑州地区2'],
        ['洛阳地区1','洛阳地区2'],
    ],
    [
        ['石家庄地区1','石家庄地区2'],
        ['保定地区1','保定地区2'],
    ],
]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="js/data.js" type="text/javascript"></script>

    <script type="text/javascript">

       /* $(document).ready(function(){

        });*/

       $(function(){

           $(provinces).each(function(i,o){
               var str = "<option value=\""+i+"\">"+o+"</option>";
               $('#province').append(str);

           });

           $('#province').on('change',function(){
               pIndex = $('#province').find(':selected').attr('value')

               $('#city').empty().append("<option value=\"\">请选择</option>");
               $('#area').empty().append("<option value=\"\">请选择</option>");

               $(cities[pIndex]).each(function(i,o){
                   var str = "<option value=\""+i+"\">"+o+"</option>";
                   $('#city').append(str);
               });

           })

           $('#city').on('change',function(){
               cIndex = $('#city').find(':selected').attr('value');

               $('#area').empty().append("<option value=\"\">请选择</option>");
               $(areas[pIndex][cIndex]).each(function(i,o){
                   var str = "<option value=\""+i+"\">"+o+"</option>";
                   $('#area').append(str);
               });

           });

       });




    </script>
</head>
<body>


    <select name="" id="province">
        <option value="">请选择</option>
    </select>省
    <select name="" id="city">
        <option value="">请选择</option>
    </select>市
    <select name="" id="area">
        <option value="">请选择</option>
    </select>县



</body>
</html>

人生任命

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习1

1.jQuery介绍什么是jQuery?jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery特点：用CSS选择来筛选元素链式语法基于方法支持json解析jQuery库包含以下功能：HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特...
复制链接

扫一扫