码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 操作标签

时间:2018-06-05 21:12:50      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:with   删除   for   ext   action   submit   ide   rda   jquer   

今日面试

1. ossys都是干什么的?

os 这个模块提供了一种方便的使用操作系统函数的方法。

os: This module provides a portable way of using operating system dependent functionality.

 

sys 这个模块可供访问由解释器使用或维护的变量和与解释器进行交互的函数。

sys: This module provides access to some variables used or maintained by the interpreter and to functions that interact strongly with the interpreter.

 

总结就是,os模块负责程序与操作系统的交互,提供了访问操作系统底层的接口;sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境。

 

import os

BASE_DIR = os.path.abspath(__file__)  # 取当前文件的绝对路径

BASE_DIR2 = os.path.dirname(os.path.abspath(__file__))  # 取当前文件的父目录的路径

path = os.path.join(BASE_DIR, "abc")  # 在当前父目录下拼接一个abc的文件夹路径

# path1 = BASE_DIR + "\\abc"  # 不推荐使用硬编码的形式拼接路径,不同平台的拼接方式不同

 

import sys

sys.path.append()  # 向当前运行的环境变量中添加一个指定的路径

 

if __name__ == ‘__main__‘:  # 取用户输入的参数

    print(sys.argv)

   print(sys.argv[1])

   print(sys.argv[2])

 

2. 你工作中都用过哪些内置模块?

re json hashlib time datetime socket thread functools

 

3. 有没有用过functools模块?

from functools import wraps # 装饰器修复技术

def wrapper(func):

    @wraps(func)

   def inner(*args, **kwargs):

       print("start")

       ret = func(*args, **kwargs)

       print("end")

       return ret

   return inner

 

from functools import partial

def f(a, b):

   return a + b

f(1, 2)

f(100, 200)

f3 = partial(f,3)  #利用partialf生成一个默认加的一个f3函数

ret = f3(100)  # 默认加3

print(ret)

 

from functools import reduce

a = range(1,6)

print(reduce(lambda x,y:x+y,a))# 15

 

 

4. 执行完第一个for循环后,查看trELefor循环内部的)发现trELefor循环结束后产生的trELe。原因,但查看时trELe时,for循环已经全部结束

   执行完第二个for循环后,查看到的trELe.innerHTMLfor循环内部的)是每一次循环的到的trEle.innerHTML

 

 

二、内容回顾

1. find()filter()

 

 

2. 作业讲解(见文档后)

   this:点谁是谁;触发方法的那个一

 

今日内容

1. 操作样式

   1. 直接操作css属性(一个参数,获取值;两个参数,设置值)

    $("p").css("color","red")  //DOM操作:tag.style.color="red"

 

 

 

 

2. 位置相关(固定定位和绝对定位是脱离文档流的)

   1. 相对定位  --> 相对自己原来的位置

   2. 绝对定位  --> 相对已经定位过的父标签

   3. 固定定位  --> 相对浏览器窗口

   offset()  // 获取匹配元素在当前窗口的相对偏移或设置元素位置(相对定位)(可查,可改)

   position()  // 获取匹配元素相对父元素的偏移(绝对定位)(只能查,不能改)

   scrollTop()  // 获取匹配元素相对滚动条顶部的偏移

   scrollLeft()  // 获取匹配元素相对滚动条左侧的偏移

 

    应用: 返回顶部(见文档后)

 

 

 

 

3. 尺寸

    盒子模型:内容-> 内填充-> 边框-> 外边距

   height()  # content

   width()  # content

 

   innerHeight()  # content+padding

   innerWidth()  # content+padding

 

   outerHeight()  # content+padding+border

   outerWidth()  # content+padding+border

 

 

4. 文本操作

   HTML代码:

   html()// 取得第一个匹配元素的html内容

   html(val)// 设置所有匹配元素的html内容

 

    文本值:

   text()// 取得所有匹配元素的内容

   text(val)// 设置所有匹配元素的内容

 

    值:

   val()// 取得第一个匹配元素的当前值

   val(val)// 设置所有匹配元素的值

   val([val1, val2])// 设置checkboxselect的值

 

    示例:

   $("input[name=‘gender‘]:checked").val()

   $("#s1").val("shanghai");

   $("#s2").val(["basketball", "football"]);

 

    应用:自定义登陆校验示例(见文档后)

 

 

 

5. 属性操作

    用于ID等或自定义属性:

   attr(attrName)// 返回第一个匹配元素的属性值

   attr(attrName, attrValue)// 为所有匹配元素设置一个属性值

   attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值

   removeAttr()// 从每一个匹配的元素中删除一个属性

 

    # 如果把attr应用与checkboxradio,选中的为checked,未选中的为undefined,不利于后续布尔判断;因此,不推荐将attr应用与checkboxradio,推荐使用prop

 

    用于checkboxradio

   prop() // 获取属性

   removeProp() // 移除属性

 

    例子:

   <input type="checkbox" value="1">

   <input type="radio" value="2">

   <script>

     $(":checkbox[value=‘1‘]").prop("checked", true);

     $(":radio[value=‘2‘]").prop("checked", true);

   </script>

 

    应用:全选,反选,取消(见文档后)

 

6. 文档处理

    添加到指定元素内部的后面

   $(A).append(B)// B追加到A

   $(A).appendTo(B)// A追加到B

 

 

    添加到指定元素内部的前面

   $(A).prepend(B)// B前置到A

   $(A).prependTo(B)// A前置到B

 

    添加到指定元素外部的后面

   $(A).after(B)// B放到A的后面

   $(A).insertAfter(B)// A放到B的后面

 

    添加到指定元素外部的前面

   $(A).before(B)// B放到A的前面

   $(A).insertBefore(B)// A放到B的前面

 

    移除和清空元素

   remove()// DOM中删除所有匹配的元素。

   empty()// 删除匹配的元素集合中所有的子节点

 

    替换

   replaceWith()

   replaceAll()

 

    克隆

   clone()// 参数

    应用:克隆(见文档后)

 

7. 注意:jQuery没有创建标签的功能,创建标签只能用DOM

 

应用练习

0.左侧菜单(作业)

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>左侧菜单作业</title>

 <style>

   .hide {

     display: none;

    }

 

   .title {

     height: 40px;

     width: 100px;

      

     color: white;

     border-bottom: 1px solid black;

     line-height: 40px;

     text-align: center;

    }

 </style>

</head>

<body>

 

 

<div class="menu">

 <div class="item">

   <div class="title">菜单一</div>

   <div class="body hide">

     <div>内容一</div>

     <div>内容一</div>

     <div>内容一</div>

     <div>内容一</div>

   </div>

 </div>

 <div class="item">

   <div class="title">菜单二</div>

   <div class="body hide">

     <div>内容二</div>

     <div>内容二</div>

     <div>内容二</div>

     <div>内容二</div>

   </div>

 </div>

 <div class="item">

   <div class="title">菜单三</div>

   <div class="body hide">

     <div>内容三</div>

     <div>内容三</div>

     <div>内容三</div>

     <div>内容三</div>

   </div>

 </div>

</div>

 

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

<script>

   var $titleEles = $(".title");

   // $titleEles.on("click", function () {}

   $titleEles.click(function () {

       // 方法一

    // $(".body").addClass("hide");

    // $(this).next().removeClass("hide");

 

       // 方法二

     $(this).next().removeClass("hide").parent().siblings().find(".body").addClass("hide");

 })

</script>

</body>

</html>

 

 

1.返回顶部

<!DOCTYPE html>

<html lang="zh-CN">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="x-ua-compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>位置相关示例之返回顶部</title>

 <style>

   .c2 {

     height: 50px;

     width: 50px;

     position: fixed;

     bottom: 15px;

     right: 15px;

     

    }

   .hide {

     display: none;

    }

 </style>

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

</head>

<body>

<div class="c3">1</div>

<div class="c3">2</div>

<div class="c3">3</div>

<div class="c3">4</div>

。。。。

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>

 

<script>

 $(window).scroll(function () {

   if ($(window).scrollTop() > 100) {

     $("#b2").removeClass("hide");

   }else {

     $("#b2").addClass("hide");

    }

  });

 $("#b2").on("click", function () {

   $(window).scrollTop(0);

  })

</script>

</body>

</html>

 

2. 自定义登陆校验示例

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>登录注册示例</title>

   <style>

       .error {

           color: red;

       }

   </style>

</head>

<body>

<form action="">

   <p>

       <label for="username">用户名</label>

       <input type="text" id="username" name="username">

       <span class="error"></span>

   </p>

   <p>

       <label for="pwd">密码</label>

       <input type="password" id="pwd" name="pwd">

       <span class="error"></span>

   </p>

   <p>

       <input type="submit" id="b1" value="登录">

   </p>

</form>

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

<script>

   $("#b1").click(function () {

       var flag = true;

       $(".error").text("");

 

       var $username = $("#username");

       var $pwd = $("#pwd");

       if ($username.val().length === 0){

           $username.next().text("用户名不能为空!");

           flag = false;

       }

       if ($pwd.val().length === 0){

           $pwd.next().text("密码不能为空!");

           flag = false;

       }

       return flag;  // 阻止后续事件的执行

        # return false, 阻止进行下一个事件(如果不满足条件,按submit,不刷新)

   })

</script>

</body>

</html>

 

3. 全选,反选,取消

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>全选反选取消练习</title>

</head>

<body>

 

<button id="b1">全选</button>

<button id="b2">取消</button>

<button id="b3">反选</button>

<table border="1">

   <thead>

   <tr>

       <th>#</th>

       <th>姓名</th>

       <th>爱好</th>

   </tr>

   </thead>

   <tbody>

   <tr>

       <td><input type="checkbox"></td>

       <td>Egon</td>

       <td>喊麦</td>

   </tr>

   <tr>

       <td><input type="checkbox"></td>

       <td>Alex</td>

       <td>吹牛逼</td>

   </tr>

   <tr>

       <td><input type="checkbox"></td>

       <td>Yuan</td>

       <td>不洗头</td>

   </tr>

   </tbody>

</table>

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

<script>

   // 全选

   $("#b1").click(function () {

       $("table :checkbox").prop("checked", true)

   });

   // 取消

   $("#b2").click(function () {

       $("table :checkbox").prop("checked", false)

   });

   // 反选

   $("#b3").click(function () {

       // 方法1

       var $checkboxs = $("table input:checkbox");

//       for (let i=0;i<$checkboxs.length;i++){

//            var $currentCheckbox = $($checkboxs[i]);

//            if ($currentCheckbox.prop("checked")){

//                // 如果之前是选中的

//               $currentCheckbox.prop("checked", false);

//            }else {

//                // 之前没有选中

//               $currentCheckbox.prop("checked", true);

//            }

//       }

       // 方法1

       for (let i=0;i<$checkboxs.length;i++){

           var $currentCheckbox = $($checkboxs[i]);

           var flag = $currentCheckbox.prop("checked");

           $currentCheckbox.prop("checked", !flag)

       }

   });

 

</script>

</body>

</html>

 

4. 克隆

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>克隆</title>

   <style>

       .b1 {

            height: 50px;

           width: 100px;

           

           color: white;

       }

   </style>

</head>

<body>

<button class="b1">屠龙宝刀,点击就送</button>

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

<script>

   $(".b1").click(function () {

//       $(this).after($(this).clone());

       $(this).clone(true).insertAfter(this);

   })

   #  clone()只克隆标签;clonetrue)克隆标签和事件

 

</script>

</body>

</html>

jQuery 操作标签

标签:with   删除   for   ext   action   submit   ide   rda   jquer   

原文地址:https://www.cnblogs.com/yangli0504/p/9141603.html

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