jQuery (JavaScript)进阶使用

  • jQuery 是一个 JavaScript 库。

  • 所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就 是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。

1、JS对象和JQuery对象转换


  • jQuery 本质上虽然也是 JS,但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象,而不是 JS 方式获得的 DOM 对象,二者的 API 方法不能混合使用,若想使用对方的 API,需要进行对象的转换。

  • JS 的 DOM 对象转换成 jQuery 对象

// JS方式,通过id属性值获取div元素

letjsDiv=document.getElementById("div");

// 将 JS 对象转换为jQuery对象

letjq=$(jsDiv);

  • jQuery 对象转换成 JS 对象

/*jQuery 对象[索引];

jQuery 对象.get(索引);*/

// jQuery方式,通过id属性值获取div元素

letjqDiv=$("#div");

// 将 jQuery对象转换为JS对象

letjs=jqDiv[0];

3、事件的绑定和解绑


  • 绑定事件

//jQuery 对象.on(事件名称,执行的功能);

  • 解绑事件

如果不指定事件名称,则会把该对象绑定的所有事件都解绑

//jQuery 对象.off(事件名称);

常用事件:

4、事件的切换


事件的切换:需要给同一个对象绑定多个事件,而且多个事件还有先后顺序关系。

方式一:单独定义

$(元素).事件方法名1(要执行的功能);

$(元素).事件方法名2(要执行的功能);

方式二:链式定义

$(元素).事件方法名1(要执行的功能)

.事件方法名2(要执行的功能);

5丶遍历:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历</title>
</head>
<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>传智播客</li>
        <li>黑马程序员</li>
        <li>传智专修学院</li>
    </ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //方式一:传统方式
    /* $("#btn").click(function(){
    let lis= $("li");
    for (let i=0;i<lis.length;i++){
        alert(i+":"+lis[i].innerHTML);
    }
    }); */
    //方式二:对象.each()方法
   /*  $("#btn").click(function(){
    let lis= $("li");
   lis.each(function(index,ele){
alert(index+":"+ele.innerHTML);
   })
    }); */
    //方式三:$.each()方法
    /* $("#btn").click(function(){
    let lis= $("li");
   $.each(lis,function(index,ele){
    alert(index+":"+ele.innerHTML);
   })
    }); */
    //方式四:for of 语句遍历
    $("#btn").click(function(){
    let lis= $("li");
    for(ele of lis ){
    alert(+ele.innerHTML);
  }
    });
</script>
</html>

jQuery选择器:

1、基本选择器


  • 选择器:类似于 CSS 的选择器,可以帮助我们获取元素。

  • 例如:id 选择器、类选择器、元素选择器、属性选择器等等。

  • jQuery 中选择器的语法:$();

代码实现

<!DOCTYPE html>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<title>基本选择器</title>

</head>

<body>

<divid="div1">div1</div>

<divclass="cls">div2</div>

<divclass="cls">div3</div>

</body>

<scriptsrc="js/jquery-3.3.1.min.js"></script>

<script>

//1.元素选择器 $("元素的名称")

letdivs=$("div");

//alert(divs.length);

//2.id选择器 $("#id的属性值")

letdiv1=$("#div1");

//alert(div1);

//3.类选择器 $(".class的属性值")

letcls=$(".cls");

alert(cls.length);

</script>

</html>

3.2、层级选择器


  • 代码实现


<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
</head>
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>
​
    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<scriptsrc="js/jquery-3.3.1.min.js"></script>
<script>
    // 1. 后代选择器 $("A B");      A下的所有B(包括B的子级)
    letspans1=$("div span");
    //alert(spans1.length);
​
    // 2. 子选择器   $("A > B");    A下的所有B(不包括B的子级)
    letspans2=$("div > span");
    //alert(spans2.length);
​
    // 3. 兄弟选择器 $("A + B");    A相邻的下一个B
    letps1=$("div + p");
    //alert(ps1.length);
​
    // 4. 兄弟选择器 $("A ~ B");    A相邻的所有B
    letps2=$("div ~ p");
    alert(ps2.length);
    
</script>
</html>

3.3、属性选择器


  • 代码实现


<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
</head>
<body>
    <inputtype="text">
    <inputtype="password">
    <inputtype="password">
</body>
<scriptsrc="js/jquery-3.3.1.min.js"></script>
<script>
    //1.属性名选择器   $("元素[属性名]")
    letin1=$("input[type]");
    //alert(in1.length);
​
​
    //2.属性值选择器   $("元素[属性名=属性值]")
    letin2=$("input[type='password']");
    alert(in2.length);
​
</script>
</html>

3.4、过滤器选择器


  • 代码实现


<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>过滤器选择器</title>
</head>
<body>
    <div>div1</div>
    <divid="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<scriptsrc="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.首元素选择器 $("A:first");
    letdiv1=$("div:first");
    //alert(div1.html());
​
    // 2.尾元素选择器 $("A:last");
    letdiv4=$("div:last");
    //alert(div4.html());
​
    // 3.非元素选择器 $("A:not(B)");
    letdivs1=$("div:not(#div2)");
    //alert(divs1.length);
​
    // 4.偶数选择器      $("A:even");
    letdivs2=$("div:even");
    //alert(divs2.length);
    //alert(divs2[0].innerHTML);
    //alert(divs2[1].innerHTML);
​
    // 5.奇数选择器      $("A:odd");
    letdivs3=$("div:odd");
    //alert(divs3.length);
    //alert(divs3[0].innerHTML);
    //alert(divs3[1].innerHTML);
​
    // 6.等于索引选择器     $("A:eq(index)");
    letdiv3=$("div:eq(2)");
    //alert(div3.html());
​
    // 7.大于索引选择器     $("A:gt(index)");
    letdivs4=$("div:gt(1)");
    //alert(divs4.length);
    //alert(divs4[0].innerHTML);
    //alert(divs4[1].innerHTML);
​
    // 8.小于索引选择器     $("A:lt(index)");
    letdivs5=$("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
    
</script>
</html>

3.5、表单属性选择器


  • 代码实现


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性选择器</title>
</head>
<body>
    <input type="text" disabled>
    <input type="text" >
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // 1.可用元素选择器  $("A:enabled");
    let ins1 = $("input:enabled");
    //alert(ins1.length);

    // 2.不可用元素选择器  $("A:disabled");
    let ins2 = $("input:disabled");
    //alert(ins2.length);

    // 3.单选/复选框被选中的元素  $("A:checked");
    let ins3 = $("input:checked");
    //alert(ins3.length);
    //alert(ins3[0].value);
    //alert(ins3[1].value);
    //alert(ins3[2].value);

    // 4.下拉框被选中的元素   $("A:selected");
    let select = $("select option:selected");
    alert(select.html());
    
</script>
</html>

DOM:

操作文本:

  • html()获取标签的文本

  • html(value)设置标签的文本内容,解析标签

操作对象:

操作属性:

操作样式:

  • 21
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
目录 第1部分 CSS基础知识篇  第1章 CSS的初步体验    1.1 CSS的概念    1.2 使用CSS控制页面    1.3 体验CSS   第2章 CSS的基本语法    2.1 CSS选择器    2.2 选择器声明   2.3 CSS的继承  第3章 用CSS设置丰富的文字效果    3.1 CSS文字样式   3.2 文字实例一:模拟Google公司Logo    3.3 文字实例二:制作页面的五彩标题    3.4 CSS段落文字   3.5 段落实例:百度搜索   第4章 用CSS设置图片效果    4.1 图片样式    4.2 图片的对齐   4.3 图文混排    4.4 图文实例:八仙过海   第5章 用CSS设置网页中的背景    5.1 背景颜色    5.2 背景图片    5.3 背景综合一:我的个人主页    5.4 背景综合二:古词《念奴娇·赤壁怀古》   第6章 用CSS设置表格与表单的样式    6.1 控制表格    6.2 表格实例一:隔行变色    6.3 表格实例二:鼠标经过时变色的表格    6.4 表格实例三:日历    6.5 CSS与表单    6.6 综合实例一:直接输入的Excel表格    6.7 综合实例二:模仿新浪网民调查问卷   第7章 用CSS设置页面和浏览器的元素    7.1 丰富的超链接特效   7.2 鼠标特效   7.3 页面滚动条   第8章 用CSS制作实用的菜单    8.1 项目列表    8.2 无需表格的菜单    8.3 菜单的横竖转换    8.4 菜单实例一:百度导航条    8.5 菜单实例二:流行的Tab菜单   第9章 CSS滤镜的应用    9.1 滤镜概述    9.2 通道(Alpha)    9.3 模糊(Blur)    9.4 运动模糊(Motion Blur)    9.5 透明色(Chroma)    9.6 下落的阴影(Dropshadow)    9.7 翻转变换(Flip)    9.8 光晕(Glow)    9.9 灰度(Gray)    9.10 反色(Invert)    9.11 遮罩(Mask)    9.12 阴影(Shadow)    9.13 X射线(X-ray)    9.14 浮雕纹理(Emboss和Engrave)    9.15 波浪(Wave)  第2部分 CSS+DIV美化和布局篇  第10章 理解CSS定位与div布局    10.1  div 标记与 span 标记   10.2 盒子模型   10.3 元素的定位    10.4 定位实例一:轻轻松松给图片签名    10.5 定位实例二:文字阴影效果   第11章 CSS+div布局方法剖析    11.1 CSS排版观念    11.2 固定宽度且居中的版式   11.3 左中右版式    11.4 块的背景色问题   11.5 排版实例:电子相册    11.6 div排版与传统的表格方式排版的分析   第12章 CSS+div美化与布局实战    12.1 框架搭建    12.2 实例一:蓝色经典    12.3 实例二:清明上河图    12.4 实例三:交河故城    12.5 自动选择CSS样式  第3部分 CSS混合应用技术篇  第13章 CSS与JavaScript的综合应用    13.1 JavaScript概述   13.2 JavaScript语法基础   13.3 实例一:输入时高亮显示的Excel表格    13.4 实例二:由远到近的文字    13.5 实例三:跑马灯特效    13.6 实例四:图片淡入淡出    13.7 实例五:CSS实现PPT幻灯片    13.8 实例六:灯光效果    13.9 实例七:舞台灯光    13.10 实例八:探照灯    13.11 实例九:鼠标文字跟随   第14章 CSS与XML的综合运用    14.1 XML基础    14.2 XML链接CSS文件    14.3 XML文字阴影效果    14.4 XML古诗字画    14.5 XML实现隔行变色的表格   第15章 CSS与Ajax的综合应用    15.1 Ajax概述    15.2 Ajax入门   15.3 Ajax实例:能够自由拖动布局区域的网页  第4部分 综合案例篇  第16章 我的博客    16.1 分析构架    16.2 模块拆分    16.3 整体调整   第17章 小型工作室网站    17.1 分析构架    17.2 模块拆分   17.3 整体调整   第18章 企业网站    18.1 分析构架   18.2 模块拆分   18.3 整体调整   第19章 网上购物网站    19.1 分析构架   19.2 模块分析   19.3 整体调整   第20章 旅游网站    20.1 分析构架    20.2 模块拆分   20.3 整体调整 精通JavaScript+jQuery 书籍目录: 第1部分 JavaScript.cCSS与DOM基础篇   第1章 ccJavaScript概述   1.1 JavaScript的起源   1.2 浏览器之争    1.2.1 DHTML    1.2.2 浏览器之间的冲突    1.2.3 标准的制定     1.3 JavaScript的实现    1.3.1 ECMAScript    1.3.2 DOM    1.3.3 BOM    1.3.4 新的开始   1.4 Web标准    1.4.1 Web标准概述    1.4.2 结构.c表现和行为的分离  第2章ccJavaScript基础   2.1 JavaScript的语法   2.2 变量   2.3 数据类型    2.3.1 字符串 .   2.3.2 数值    2.3.3 布尔型    2.3.4 类型转换    2.3.5 数组   2.4 关键字   2.5 保留字   2.6 条件语句    2.6.1 比较操作符    2.6.2 逻辑操作符    2.6.3 if语句    2.6.4 switch语句   2.7 循环语句    2.7.1 while语句    2.7.2 do…while语句    2.7.3 for语句    2.7.4 break和continue语句    2.7.5 for…in语句    2.7.6 实例:九九乘法表   2.8 函数    2.8.1 定义和调用函数    2.8.2 用arguments对象访问函数的参数    2.8.3 实例:杨辉三角   2.9 其他对象    2.9.1 对象简述    2.9.2 时间日期:Date对象    2.9.3 数学计算:Math对象   2.10 BOM基础    2.10.1 window对象    2.10.2 document对象    2.10.3 location对象    2.10.4 navigator对象    2.10.5 screen对象  第3章 ccCSS基础   3.1 CSS的概念    3.1.1 标记的概念    3.1.2 传统HTML的缺点    3.1.3 CSS的引入    3.1.4 浏览器与CSS   3.2 使用CSS控制页面    3.2.1 行内样式    3.2.2 内嵌式    3.2.3 链接式    3.2.4 导入样式   3.3 CSS选择器    3.3.1 标记选择器    3.3.2 类别选择器    3.3.3 ID选择器    3.3.4 选择器集体声明    3.3.5 选择器的嵌套    3.3.6 子选择器    3.3.7 属性选择器   3.4 CSS设置文字效果    3.4.1 CSS文字样式    3.4.2 CSS段落文字    3.4.3 首字放大   3.5 ccCSS设置图片效果    3.5.1 图片的边框    3.5.2 图文混排   3.6 CSS设置页面背景    3.6.2 背景图片    3.6.3 背景图的重复    3.6.4 背景样式综合设置   3.7 CSS设置超链接效果   3.8 CSS制作实用菜单    3.8.1 项目列表    3.8.2 无需表格的菜单  第4章 ccCSS进阶   4.1 标记与标记    4.1.1 概述    4.1.2 与的区别   4.2 盒子模型   4.3 元素的定位    4.3.1 float定位    4.3.2 position定位    4.3.3 z-index空间位置   4.4 CSS排版观念    4.4.1 将页面用div分块    4.4.2 设计各块的位置    4.4.3 用CSS定位   4.5 排版实例:我的博客    4.5.1 设计分析    4.5.2 排版构架    4.5.3 导航与Banner      4.5.4 左侧列表    4.5.5 内容部分    4.5.6 footer脚注    4.5.7 整体调整   4.6 JavaScript与CSS    4.6.1 颜色渐变的文字    4.6.2 鼠标文字跟随    …… 第2部分 JavaScript.cCSS.cDOM高级篇 第3部分 jQuery框架篇 第4部分 综合案例篇

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月初,

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值