Jquery的高级进阶、以及使用教程

Jquery概述

Jquery是一个优秀的javascript的轻量级框架之一,封装了dom操作、事件、页面动画、异步操作等功能。

Jquery与js的区别

Jquery虽然本质上也是js,但如果使用jQuery的属性和方法那么必须保证对象是Jquery对象而不是js对象。

jq与js对象之间的相互转换

  1. Jquery对象与js对象相互转换
    js --> jq
    $(js对象) 或者Jqueryjs对象)
    jq --> js
    jq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq与js对象相互转换</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>

<script>
    // 通过js方式修改文本内容
    let elementById = document.getElementById('myDiv');
    elementById.innerHTML = '通过js方式修改的';
    // 通过jq方式修改文本内容
    let $myDiv = $('#myDiv');
    $myDiv.html("通过jq方式修改的")
    // js对象和jq对象的:属性和方法不同通用
</script>
</body>
</html>

页面加载事件

  1. 页面加载事件
    js
    window.οnlοad=function(){}
    jq
    $(function(){})
    区别
    js:只能定义一次,如果定义多次,后加载会进行覆盖
    jq:可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面加载事件</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<script>
    // js页面加载事件
    /*  window.οnlοad=function () {
          alert('js加载事件1');
      }

      window.οnlοad=function () {
          alert('js加载事件2');
      }*/


    // jq页面加载事件
    $(function () {
        alert('jq加载事件1')
    })
    $(function () {
        alert('jq加载事件2')
    })
</script>
</body>
</html>

Jquery对象与dom对象的区别

Jquery选择器

基本选择器

  1. 标签(元素)选择器
    * 语法:$(“html标签名”) 获得所有匹配标签名称的元素

  2. id选择器
    * 语法:$("#id的属性值") 获得与指定id属性值匹配的元素

  3. 类选择器
    * 语法:$(".class的属性值") 获得与指定的class属性值匹配的元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<span class="female">拉克丝</span>
<span class="female">辛德拉</span>
<span class="female hero">女刀锋</span>

<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>


<span id="boss">灭霸</span>

<script>
    // 1.获取span标签的jquery对象
    $('span')
    // 2.获取class有hero的jquery对象
    $('.hero')
    // 3.获得id="boss"的jquery对象
    $('#boss')
</script>
</body>
</html>

层级关系选择器

  1. 后代选择器
    * 语法:$(“A B”) 选择A元素内部的所有B元素

  2. 并集选择器
    * 语法:$(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>层级关系选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
    <span>儿子:雍正</span>
    <p>
        <span>孙子:乾隆</span>
    </p>
</div>
<div>牛顿</div>

<script>
    // 1. 获取所有的p,span的文本
    console.log($('p span').text());//孙子:乾隆
    // 2. 获取div的后代span的文本
    console.log($('#kangxi span').text());//儿子:雍正 孙子:乾隆
    //3.获取div标签的文本
    console.log($('div').text());   //  儿子:雍正 孙子:乾隆 牛顿
</script>
</body>
</html>

属性选择器

  1. 属性选择器
    * 语法:$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器

  2. 复合属性选择器
    * 语法:$(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>

<input type="text" name="username" value="用户名"/><br/>

<input type="text" name="nickname" value="昵称"/><br/>

<script>
    // 1.获取type='text'的input标签
    $('input[type="text"]');
    // 2.获取type='text' 且 name="nickname" 的input标签
    $('input[type="text"] [name="nickname"]');
</script>
</body>
</html>

过滤选择器

  1. 首元素选择器
    * 语法: :first 获得选择的元素中的第一个元素

  2. 尾元素选择器
    * 语法: :last 获得选择的元素中的最后一个元素

  3. 偶数选择器
    * 语法: :even 偶数,从 0 开始计数

  4. 奇数选择器
    * 语法: :odd 奇数,从 0 开始计数

  5. 指定索引选择器
    * 语法: :eq(index) 指定索引元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
    <li>大娃(红娃)</li>
    <li>二娃(橙娃)</li>
    <li>三娃(黄娃)</li>
    <li>四娃(绿娃)</li>
    <li>五娃(青娃)</li>
    <li>六娃(蓝娃)</li>
    <li>七娃(紫娃)</li>
</ul>

<script>
    // 1.获取第一个元素
    $('li:first');
    // 2.获取偶数索引元素
    $('li:even');
    // 3.获取指定索引2的元素
    $('li:eq(2)');
    //获取大于索引2的元素
    $('li:gt(2)');
</script>
</body>
</html>

对象遍历

  • 语法:
    jq对象.each(function(index,element){

      })
    
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>对象遍历</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
</ul>

<script>
    $('li').each(function (index, element) {
        console.log(index);
        console.log(element);
        console.log(element.innerHTML); // 遍历的元素是js对象
        console.log($(element).html()); // 升级为jq对象
        console.log(this); // 当前遍历的元素,相当于element  补充
    })
</script>

</body>
</html>

Jquery的dom操作

Jquery操作内容

  1. text(): 获取/设置元素的标签体纯文本内容
    * 相当于js: innerText属性

  2. html(): 获取/设置元素的标签体超文本内容
    * 相当于js: innerHTML属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作内容</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div>

<script>
    // 1.text()操作内容
    //获取纯文本的内容
    console.log($('#myDiv').text());
    //设置纯文本内容
    $('#myDiv').text('<h2>提莫一米五</h2>');//<h2>提莫一米五</h2>

    // 2.html()操作内容
    //获取超文本的内容
    console.log($('#myDiv').html());
    //设置超文本内容
    $('#myDiv').html($('#myDiv').html() + `<h2>提莫一米五</h2>`);//提莫一米五
</script>
</body>
</html>

Jquery操作属性

  1. val(): 获取/设置元素的value属性值
    * 相当于:js对象.value

  2. attr(): 获取/设置元素的属性
    removeAttr() 删除属性
    * 相当于:js对象.setAttribute() / js对象.getAttribute()

  3. prop():获取/设置元素的属性
    removeAttr() 删除属性
    jq在1.6版本之后,提供另一组API prop 通常处理属性值为布尔类型操作
    例如:checked selected等

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作属性</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>

    爱好
    <input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">打球<br/>

    <input type="reset" value="清空按钮"/>
    <input type="submit" value="提交按钮"/><br/>
</form>

<!--
1. val(): 获取/设置元素的value属性值
		* 相当于:js对象.value

2. attr(): 获取/设置元素的属性
	removeAttr()	删除属性
		* 相当于:js对象.setAttribute() / js对象.getAttribute()

3. prop():获取/设置元素的属性
	removeAttr()	删除属性
	jq在1.6版本之后,提供另一组API prop 通常处理属性值为布尔类型操作
		例如:checked selected等
-->

<script>
    // 1.获取文本框value属性
    console.log($('#username').attr('value'));//查看
    $('#username').attr('value', '盖伦');//新增or修改
    $('#username').removeAttr('value'); // 删除
    // 2.获取爱好的checked属性
    console.log($('#hobby').prop('checked'));//true【如果该属性存在返回true,该属性不存在返回false】
</script>
</body>
</html>

Jquery操作样式

  1. 直接修改jq对象样式属性
    语法:
    jq对象.css()
    css(样式名) 获取
    css(样式名,样式值) 设置
    优点:支持css语法
    举例:font-size

  2. 添加/删除jq对象样式
    语法:
    jq对象.addClass()
    jq对象.removeClass()

  3. 切换jq对象样式
    语法:
    jq对象.toggleClass() 无添加,有删除

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作样式</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <style>
        #p1 {
            background-color: red;
        }

        .mp {
            color: green
        }

        .mpp {
            background-color: lightgray;
        }
    </style>

</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4.
    <button id="toggle">切换</button>
    class样式
</p>

<script>
    let $p1 = $('#p1');//获取p1
    let $p2 = $('#p2');//获取p2
    let $p3 = $('#p3');//获取p3
    let $p4 = $('#p4');//获取p4

    // 1. 设置一个css样式
    $p1.css('background-color', "red");
    // 2. 批量设置css样式
    $p2.css({'border': '1px solid red', 'font-size': '20px'});
    // 3. 通过class设置样式
    $p3.addClass('mp mpp');
    $p3.removeClass('mpp');
    // 4. toggleClass() 切换一个class
    $('#toggle').click(function () {
        $p4.toggleClass('mpp')
    })
</script>

</body>
</html>

Jquery操作元素

  1. $(标签) 创建一个标签
    $(‘

  2. xxx
  3. ’)

  4. $.prepend() 在父标签中将子标签放在第一个位置

  5. $.append() 在父标签中将子标签放在最后一个位置

  6. $.empty() 清空子元素

  7. $.remove() 删除自己

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>dom操作元素</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
    <li>拉克丝</li>
    <li>金克斯</li>
</ul>

<script>
    //let $star = $('#star'); // 无序列表
    // 1.前面添加马尔扎哈
    $('#star').prepend($('<li>马尔扎哈</li>'))
    // 2.后面添加风女
    $('#star').append($('<li>风女</li>'))
    // 3.移出所有列表项
    $('#star').empty();
    // 4.删除无序列表
    $('#star').remove();
</script>
</body>
</html>

Jquery绑定事件

js对象.事件属性=function(){}

jq对象.事件函数(function(){})

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq事件绑定</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>

<script>
    // js事件绑定
    document.getElementById('jsBtn').onclick=function () {
        alert('js事件绑定')
    }
    // jq事件绑定
    $('#jqBtn').click(function () {
        alert('jq事件绑定')
    })
</script>
</body>
</html>

案例练习

隔行换色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>01-案例-隔行变色</title>
    <script src="../js/jquery-3.2.1.min.js"></script>

</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
    <tr  bgcolor="#ffd770">
        <th width="100px" >
            <button id="toggle">全选</button>
        </th >
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>5</td>
        <td>牛奶制品</td>
        <td>牛奶制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>6</td>
        <td>大豆制品</td>
        <td>大豆制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>7</td>
        <td>海参制品</td>
        <td>海参制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>8</td>
        <td>羊绒制品</td>
        <td>羊绒制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>9</td>
        <td>海洋产品</td>
        <td>海洋产品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>10</td>
        <td>奢侈用品</td>
        <td>奢侈用品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
<script>
    //隔行换色
    $(`tr:gt(0):even`).css('background-color', 'skyblue');//偶数索引,奇数行
    $(`tr:gt(0):odd`).css('background-color', 'pink');//奇数索引,偶数行

    let oldcolor;
    //鼠标移入事件
    $('tr:gt(0)').mouseover(function () {
        //记录之前的颜色
        oldcolor = $(this).css('background-color');
        //设置新的颜色
        $(this).css('background-color', 'red');
    });
    //鼠标移出事件
    $('tr:gt(0)').mouseout(function () {
        oldcolor = $(this).css('background-color', oldcolor);
    });
    //设置开关按钮
    $('#toggle').click(function () {
        $('input[type="checkbox"]').each(function (index, element) {
            element.checked = !element.checked;
        })
    })
</script>


</body>
</html>

商品全选

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>案例-商品全选</title>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
    1. 全选 点击全选按钮,所有复选框都被选中
    2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script>
    //全选【ID选择器记得加#】
    $('#btn1').click(function () {
        $(`input[type="checkbox"]`).prop('checked', true);
    });
    //反选,必须遍历
    $('#btn2').click(function () {
        $('input[type="checkbox"]').each(function (index, element) {//element是js对象
            //使用的是js的方式
            element.checked = !element.checked;

        })
    })


</script>
</body>
</html>

QQ表情选择

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>QQ表情选择</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .emoji {
            margin: 50px;
        }

        ul {
            overflow: hidden;
        }

        li {
            float: left;
            width: 48px;
            height: 48px;
            cursor: pointer;
        }

        .emoji img {
            cursor: pointer;
        }
    </style>
    <script src="../js/jquery-3.2.1.min.js"></script>

</head>
<body>
<div class="emoji">
    <ul>
        <li><img src="../img/01.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/02.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/03.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/04.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/05.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/06.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/07.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/08.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/09.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/10.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/11.gif" height="22" width="22" alt=""/></li>
        <li><img src="../img/12.gif" height="22" width="22" alt=""/></li>
    </ul>
    <p id="word">
        <strong>请发言:</strong>
        <img src="../img/12.gif" height="22" width="22" alt=""/>
    </p>
</div>

<script>
    //class选择器
    $('.emoji img').click(function () {
        //alert('1');
        //append表示向ID为word中追加内容,this代表的是当前 img标签 clone是克隆【将克隆的img追加进来】
        $('#word').append($(this).clone());
    })


</script>


</body>
</html>
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值