前段学习篇 - jQuery

最新推荐文章于 2024-07-26 15:59:24 发布

color_coral

最新推荐文章于 2024-07-26 15:59:24 发布

阅读量103

点赞数

分类专栏：前段

本文链接：https://blog.csdn.net/color_coral/article/details/89971963

版权

前段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jquery基础语法：

$(selector).action()

查找标签：

1.基本选择器

$("#id")

$("tagName") //标签选择器

$(".className") //class选择器

$("div.c1") //找到c1 class类的div标签

$("*") //找到所有选择的选择器

$("#id, .className, tagName") //组合选择器

2.层级选择器

$("x y"); //x所有的后代y
$("x > y") //x所有的儿子y
$("x + y") //找到所有紧挨在x后面的y
$("x ~ y") //x之后所有的兄弟y

3.基本筛选器

:first //第一个
:last //最后一个
:eq(index) //索引等于index的那个元素
:even // 匹配所有索引为偶数的元素，从0开始
:odd //匹配所有索引值为奇数的元素，从0开始
:gt(index) //匹配所有大于给定元素索引值的元素
:lt(index) //匹配所有小于给定元素索引值的元素
:not(元素选择器) //移除所有满足not条件的标签
:has(元素选择器) //选取所有包含一个或多个标签在其内的标签（指的是从后代元素找）

例子

$("div:has(h1)")     //找到所有后代中有h1的div标签
$("div:has(.c1)")    //找到所有后代中有c1样式类的div标签
$("li:not(.c1)")     //找到所有不包含c1样式的li标签
$("li:not(:has(a))") //找到所有后代中不含a标签的li标签

4.属性选择器

[attribute]

[attribute = value] //属性等于

[attribute != value] //属性不等于

//示例，多用于input标签

$("input[type='checkbox']"); //取到checkbox类型的input标签

$("input[type!='text']"); //取到类型不是text的input标签

5.表单选择器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

例子：

$(":checkbox") //找到所有的checkbox

表单对象属性

:enable

:disabled

:checked

:selected

北京市上海市广州市

$(":selected") //找到所有被选中的option

6.筛选器的方法

选择器或者筛选器选择出来的都是对象，而筛选方法就是通过对象来调用一个进一步过滤作用的方法

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2") #直到找到id为i2标签就结束查找，不包含他

父亲元素：

$("#id").parent()

$("#id").parents() //查找当前元素的所有父辈元素，爷爷辈，祖先都找到

$("#id").parentsUntil('body') //查找当前元素所有的父辈元素，直到找到匹配的元素为止

$("#id").children(); //儿子们

$("#id").siblings(); //兄弟们，不包含自己

$("div").find("p")

$("div").filter(".c1") // 从结果中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div,和find不同，find是找到div标签的子子孙孙中找到一个符合条件的标签

等价于： $("div.c1")

.first() // 获取匹配的第一个元素

.last() //获取匹配的最后一个元素

.not() //从匹配元素的集合中删除指定表达式的元素

.has() //保留包含特定后代的元素，去掉那些不含有指定后代的元素

.eq() //索引值等于指定值的元素

操作标签

样式类

addClass(); //添加指定的css类名

removeClass(); //移除指定的css类名

hasClass(); //判断样式存在不存在

toggleClass(); //判断css类名，有就移除，没有就添加

例子：

$("p").css("color","red")

位置操作：

offset()

position()

$(window).scrollTop() //滚轮向下移动的距离

$(window).scrollLeft() //滚动向左移动的距离

尺寸：

height() //盒子模型的高度大小，我们设置的标签高度和宽度

innerHeight() //内容content高度 + 两个padding的高度

outerHeight() //内容高度+两个padding的高度+两个border的高度，不包含margin的高度

文本操作

html代码：

html() //取得第一个匹配元素的html内容，包含标签内容

html(val) //设置所有匹配元素html内容，识别标签，内阁表现出标签的效果

文本值：

text() //取得匹配元素的内容，只有文本内容，没有标签内容

text(val) //设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

$("[name='hobby']").val(['basketball','football'])
$("#s1").val(["1","2"])

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

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

属性操作

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

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

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

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

用于checkbox和radio

prop() //获取属性

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

<script>
    $(":checkbox[value='1']").prop("checked",true);
    $(":radio[value='2']").prop("checked",true);
</script>

文档处理

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

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

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

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

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

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

移除和清空元素

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

empty() //删除匹配元素集合中所有的子节点，包括文本全部删除，但是匹配的元素还在

clone() //参数

事件绑定

click(function(){ ... })

hover( function () { ... } )

blur( function() {...} )

focus( function() {...} )

change( function() {...} )

keyup ( function() { ... } )

mouseover 和 mouseenter

.on( events[,selector] , function(){})

events: 事件
selector: 选择器
function: 事件处理函数

<!DOCTYPE html>
<html lang="en">
<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>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="title">菜单一</div>
    <div class="items">
      <div class="item">1111</div>
      <div class="item">2221</div>
      <div class="item">3331</div>
    </div>
    <div class="title">菜单二</div>
    <div class="items hide">
      <div class="item">1112</div>
      <div class="item">2222</div>
      <div class="item">3332</div>
    </div>
    <div class="title">菜单三</div>
    <div class="items hide">
      <div class="item">1113</div>
      <div class="item">2223</div>
      <div class="item">3333</div>
    </div>
  </div>
</div>
<div class="right"></div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(".title").click(function(){
        $(".items").addClass("hide")
        $(this).next().removeClass("hide")
    })

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

color_coral

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前段学习篇 - jQuery

jquery基础语法：$(selector).action()查找标签：1.基本选择器$("#id")$("tagName") //标签选择器$(".className") //class选择器$("div.c1") //找到c1 class类的div标签$("*") //找到所有选择的选择器$("#id, .className, tagName") //...
复制链接

扫一扫

专栏目录