jQuery

学习网址

# W3C
https://www.w3school.com.cn/jquery/index.asp
# 官网
https://jquery.com/
# jQuery API 中文网
http://jquery.cuishifeng.cn/

一： jQuery对象

jQuery变量是对js变量的一种封装，这两种变量分别只能使用自己的方法

js和jQuery定义变量的方式
注意： 通常我们在定义jquery变量的时候在前面加一个$，目的是区分jquery和js
<script>
    // js
    var divjsele = document.getElementById('d1');
    console.log(divjsele);
    // jQuery
    var $divjqele = $('#d1');
    console.log($divjqele);
</script>

两者可以进行相互转换

将js对象转换为jQuery对象，使用$符号
    var checkjsele = document.getElementById('i1');
    console.log(checkjsele);
    console.log($(checkjsele));

# 将jQuery对象转换为js对象 使用索引
    var $checkjqele = $("#i1");
    console.log($checkjqele);
    console.log($checkjqele[0]);

二：选择器

2.1 id选择器

通过id选择

<script>
    var $checkidele = $("#i1");
    console.log($checkidele)
</script>

2.2 类选择器

通过类进行选择

<script>
    var $democlass = $(".democlass")
    console.log($democlass)
</script>

2.3 标签元素选择器

<script>
    var $diveles = $("div");
    console.log($diveles);
</script>

2.4 并集选择器

多个选择器使用逗号分隔

# 找到id为的,类为classp和h1标签的元素
<script>
    var $bj = $("#d1,.classp,h1")
    console.log($bj)
</script>

2.5 后代选择器

使用空格分隔

html

<body>
<ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>

jQuery

<script>
    var $lieles  = $(".menu li");
    console.log($lieles);
</script>

2.6 子代选择器　　

使用 > 号进行选择

<body>
<div class="dclass">
    <p>子p</p>
    <div>
        <p>孙p</p>
    </div>
</div>

<script>
    var $pele = $(".dclass > p");
    console.log($pele);
</script>
</body>

2.7 根据索引位置查找

:first 第一个元素

<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

<script>
    var $lieles = $("ul > li");
    console.log($lieles);

    var $lifirst = $("ul > li:first")
    console.log($lifirst)
</script>
</body>

:last 最后一个元素

<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

<script>
    var $lieles = $("ul > li");
    console.log($lieles);

    var $lilast = $("ul > li:last");
    console.log($lilast)
</script>
</body>

eq
索引从0开始

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

<script>
    var $eqli = $("ul > li:eq(0)");
    console.log($eqli)
</script>

even
1 3,5行内容

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

<script>
    var $lieven = $("ul > li:even");
    console.log($lieven);
</script>

odd
2.3.4行内容

<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

<script>
    var $liodd = $("ul > li:odd");
    console.log($liodd);
</script>
</body>

gt(index) 索引大于index的元素

<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

<script>
    var $li2 = $("ul li:gt(3)");
    console.log($li2);
</script>
</body>

lt(index) 索引小于index的元素

<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

<script>
    var $lilt2 = $("ul > li:lt(2)");
    console.log($lilt2);
</script>
</body>

2.8 属性选择器

[attribute=value]
属性值为value的元素

# 属性name为pwd的input标签
<body>
<form action="#" method="post">
    <input type="text" name="username">用户名 <br>
    <input type="password" name="pwd">密码<br>
</form>

<script>
    var $pwd = $("form > input[name='pwd']");
    console.log($pwd);
</script>
</body>

2.9 表单元素选择器

<body>
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

<script>
    // 类型为text的元素
    var $text = $(":text");
    console.log($text);

    // 类型为checkbox的元素
    var $checkbox = $(":checkbox");
    console.log($checkbox);

    // 类型为radio的元素
    var $radio = $(":radio");
    console.log($radio);

    // 类型为image的元素
    var $img = $(":image");
    console.log($img);

    // 类型为file的元素
    var $file = $(":file");
    console.log($file);

    // 类型为submit的元素
    var $submit = $("form input:submit");
    console.log($submit);

    // 类型为reset的元素
    var $reset = $("form input:reset");
    console.log($reset);

    // 类型为passwd
    var $password = $("form input:password");
    console.log($password);

    var $button = $(":button");
    console.log($button);

    var $select = $(":selected")
</scrip

三：筛选器

3.1 first() 方法

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    // var $lifirst = $("ul li:first");
    // console.log($lifirst);

    var $lifirst = $("ul li").first();
    console.log($lifirst);

</script>
</body>

2.2 索引

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $liindex1 = $("ul li").eq(1);
    console.log($liindex1);
</script>
</body>

2.3 最后一个元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $lilast = $("ul li").last();
    console.log($lilast);
</script>
</body>

2.4 下一个元素

next 下一个元素
nextAll 下面的所有元素
nextUntil 下面知道。。的所有元素

<body>
<ul>
    <li id="i1">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $next = $("#i1").next();
    console.log($next);

    var $nextall = $("#i1").nextAll();
    console.log($nextall);
</script>
</body>

2.5 上一个元素

prev 上一个元素
prevAll 上面的所有元素
prevUtil 上面的知道。。。的元素

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $prev = $("ul li").last().prev();
    console.log($prev);
</script>
</body>

2.6 子元素 children()

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $chi = $('ul').children();
    console.log($chi);
</script>
</body>

2.7 父元素 parent()

<body>
<ul>
    <li class="item">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $parent = $('.item').parent();
    console.log($parent);
</script>
</body>

2.8 兄弟元素 siblings

<body>
<ul>
    <li class="item">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
   var $xdjm = $(".item").siblings();
   console.log($xdjm)
</script>
</body>

2.9 find 找到后代满足条件的元素的集合

<body>
<ul>
    <li class="item">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $finddemo = $('ul').find('.item');
    console.log($finddemo)
</script>
</body>

2.10 从已经找到的元素中筛选出满足条件的元素

<body>
<ul>
    <li class="item">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var $filterdemo = $('ul li').filter('.item');
    console.log($filterdemo);
</script>
</body>

三：jQuery操作

3.1 样式操作

addClass 增加样式
removeClass 删除样式
hasClass 判断某样式是否存在，如果存在则返回true,如果不存在则返回false
toggleClass 如果样式存在则删除，不存在则加上

<body>
<ul>
    <li class="item demo">item1</li>
    <li class="item demo">item2</li>
    <li class="item demo">item3</li>
</ul>
<script>
    var $liitem = $("ul li");
    $liitem.addClass('btn-success');
    console.log($liitem.hasClass('item'));

    $liitem.removeClass('item');
    console.log($liitem.hasClass('item'));

    $liitem.toggleClass('demo')
</script>
</body>

3.2 css样式

<body>
<ul>
    <li class="item demo">item1</li>
    <li class="item demo">item2</li>
    <li class="item demo">item3</li>
</ul>
<script>
  var $lieles = $("ul li");
  $lieles.css('color','red');
  $lieles.css({
      'color': 'green',
      'font-size': 21
  });
</script>
</body>

jQuery选择checkbox

# 使用:checkbox快速选中所有的checkbox   
 var $checkeles =  $(":checkbox");
 console.log($checkeles)

jQuery

posted @ 2019-09-28 18:15 择一事，终一生阅读(102) 评论(0) 收藏举报

刷新页面返回顶部

择一事，终一生

jQuery

一： jQuery对象

二： 选择器

2.1 id选择器

2.2 类选择器

2.3 标签元素选择器

2.4 并集选择器

2.5 后代选择器

2.6 子代选择器

2.7 根据索引位置查找

2.8 属性选择器

2.9 表单元素选择器

三： 筛选器

3.1 first() 方法

2.2 索引

2.3 最后一个元素

2.4 下一个元素

2.5 上一个元素

2.6 子元素 children()

2.7 父元素 parent()

2.8 兄弟元素 siblings

2.9 find 找到后代满足条件的元素的集合

2.10 从已经找到的元素中筛选出满足条件的元素

三：jQuery操作

3.1 样式操作

3.2 css样式

公告

二：选择器

2.6 子代选择器　　

三：筛选器