事件 jQuery 选择器筛选器样式操作 CSS操作文本操作

标签：jQuery color 标签 li var 操作 div 选择器 css

事件

事件可以理解为：给HTML标签添加了一些额外的功能，并且能够触发JS的代码运行

1.事件就是达到某个触发条件，自动触发的动作
2.常用的事件
	1.onclick：当用户点击某个对象是调用的事件句柄
  2.onfoucus：元素获取焦点
  3.onblur：元素失去焦点
  4.onchange：域的内容被改变
  5.onload：一张页面或一幅画像完成加载
  6.onmouseout:鼠标从某元素移开
  7.onmouseover：鼠标移到某元素之上

常用事件

1.onclick        当用户点击某个对象时调用的事件句柄。
2.ondblclick     当用户双击某个对象时调用的事件句柄。
3.onfocus        元素获得焦点。// 练习：输入框
4.onblur         元素失去焦点。//应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
5.onchange       域的内容被改变。//应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
6.onkeydown      某个键盘按键被按下。//应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
7.onkeypress     某个键盘按键被按下并松开。
8.onkeyup        某个键盘按键被松开。
9.onload         一张页面或一幅图像完成加载。
10.onmousedown    鼠标按钮被按下。
11.onmousemove    鼠标被移动。
12.onmouseout     鼠标从某元素移开。
13.onmouseover    鼠标移到某元素之上。
14.onselect      在文本框中的文本被选中时发生。
15.onsubmit      确认按钮被点击，使用的对象是form。

绑定方式

方式一：

提前写好函数，标签内部指定

<body>
    <标签名     事件= "函数名()">
    <script>
    function 函数名(){
        函数体
    }
    </script>
</body>

举例

<body>
<button onclick="f1()">点击</button>
<script>
        function f1(){
            alert('可以看见吗？')
        }
</script>
</body>

方式二

先查找标签，然后在批量绑定(推荐)

<script>
    标签对象.事件名= function (){
        函数体代码
    }
</script>

举例

<body>
<button id = 'btn'>点击</button>
<script>
    var btn = document.getElementById('btn')
    btn.onclick =  function (){
        alert('可以看见吗？')
    }
</script>
</body>

事件中的关键字this

表示触发事件的当前元素。在方式一中，this指代document文档；在方式二中this指代当前被操作的标签对象

<body>
<button onclick="f1()">点击我</button>
<button id = 'd1'>点击我</button>
<script>
    function f1(){
        alert('方式一')
        console.log(this) // Window
    }

    var btn = document.getElementById('d1')
    btn.onclick = function (){
        alert('方式二')
        console.log(this) //<button id = 'd1'>点击我</button>
    }

</script>
</body>

需求：点击按钮换背景颜色

<body>
<button id = 'd1'>点击我</button>
<script>


    var btn = document.getElementById('d1')
    btn.onclick = function (){
        btn.style.backgroundColor = 'red'
        console.log(this) //<button id = 'd1'>点击我</button>
    }

</script>
</body>

事件与函数带参数使用

<body>
<button onclick="f1(1,2)">点击我</button>
<script>
    function f1(a,b){

        console.log(a,b) // Window
    }
</script>
</body>

window.onload

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕；window.onload等待文档加载完毕之后再执行一些代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
        }
    </script>
</head>

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    window.onload =  function (){
        var btn = document.getElementById('d1')
        btn.onclick = function (){
            alert('看见了')
        }

    }
</script>
</head>
<body>
<button id = 'd1'>点击我</button>
</body>
</html>

案例

点击一下就换背景颜色（开关灯案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1 {
        height: 300px;
        width: 300px;
      border: 10px solid greenyellow;
        border-radius: 50%;

    }
    .change_red{
      background-color: red;
    }
    .change_blue{
      background-color: blue;
    }
  </style>
</head>
<body>
<div class="c1 change_red change_blue"></div>
<button id = 'd1'> 换颜色</button>
<script>
    var btn  = document.getElementById('d1')
    var div = document.getElementsByTagName('div')[0]
    btn.onclick = function (){
        div.classList.toggle('change_blue')
    }
</script>
</body>
</html>

input事件

input框有两个事件：1. 获取焦点 2. 失去焦点

获取焦点-onfocus()

<body>

<p>用户名：<input type="text" id = 'inp1' value="请输入用户名"></p>
<script>
  var inp1 = document.getElementById('inp1')
  inp1.onfocus = function (){
    this.value = ''
  }
</script>

</body>

失去焦点-onblur()

<body>
<p>用户名：<input type="text" id = 'inp1' value="请输入用户名"></p>
<script>
  var inp1 = document.getElementById('inp1')
  inp1.onfocus = function (){
    this.value = ''
  }
  inp1.onblur= function (){

      this.value = 'ok'
  }
</script>
</body>

举例：省市联动(onchange事件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="se1"></select>
<select name="" id="se2"></select>

<script>
  //1.给sel标签添加东西
      var data = {
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区", "大兴", "丰台"],
        "山东": ["威海市", "烟台市"]
    };
  //1.1找到sel标签
  var se1 = document.getElementById('se1')
  //1.2 往se1标签添加option标签
  for (var i in data){
    var pro = document.createElement('option')
      pro.innerText = i
      pro.value = i
      se1.appendChild(pro)
  }

  se1.onchange = function (){
  //2.1找
  var se2 = document.getElementById('se2')
  //2.2添加option标签
  var current_pro = se1.value
  var current_city_list = data[current_pro]

   se2.innerText= ''
  for (var j = 0 ;j<current_city_list.length;j++){

      var city = document.createElement('option')
      city.innerText = current_city_list[j]
      city.value = current_city_list[j]
      se2.appendChild(city)
  }
  }

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

jQuery简单介绍

1.jQuery:他的内部封装了很多js代码，并且额外增加了很多的功能--他就是js的一个类库
			在python中，我们有模块这个概念，js中没有模块的概念，js是类库的概念，类库就相当于是我们的模块
2.jquery是对js 的一个高度封装，我们直接学习封装之后的代码

3.jquery介绍.
    1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。（使用jquery不用担心兼容性问题）
    2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
		3. 要想使用jquery，必须下载使用它，然后引入都我们的html文档中
		4. 下载的这个jquery文件大小只要即是KB，很小，几乎不影响加载速度
    5.jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
    
4.jQuery学习内容
		1. 选择器
    2. 筛选器
    3. 样式操作
    4. 文本操作
    5. 属性操作
    6. 文档处理
    7. 事件
    8. 动画效果
    9. 插件
    10. each、data、Ajax(放在Django中学---》重要)


5.jQuery版本 ：1.x 2.x 3.x（学习最新版本）
6.jquery文件下载
    1.官网：https://jquery.com/
    2.第三方：https://jquery.cuishifeng.cn/index.html
    3.bootcdn：https:https://www.bootcdn.cn/
				1  .js  是没有压缩
        2  .min.js    是压缩的（下载）
    		3  网络CDN服务，只要计算机能够联网就可以直接导入(稳定、快速、免费的前端开源项目CDN加速服务：https://www.bootcdn.cn/)

7.使用jquery文件两种方式
    1.把文件下载下来，离线使用（另存为）
        在pythom中的 file and code templates 添加（不用每次都添加了）
    2.不下载，直接通过cdn链接使用

jQuery基本使用

jQuery基本语法

1.最开始
	jQuery('选择器').action()
2.后面
	$('选择器').action()

JS与jQuery语法对比

<body>
<h1 id = 'h1' class="c1" >hello</h1>
<h1 id = 'h2' class="c1">hello</h1>
</body>
<script>
    var h1 = document.getElementById('h1')
    h1.style.color = 'red'
    console.log(h1) //<h1 id = 'h1' className="c1" style="color: red;">hello</h1>

    var h2 = $('#h2').css('color','blue')
    console.log(h2) //S.fn.init[h1#h2.c1]
</script>

基本选择器

id选择器

$("#id")

标签选择器

$("tagName")

class选择器

$(".className")

所有元素选择器

$("*")

配合使用

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

<body>
<div id ='d1' > div</div>
<p class="c1 c2">p c1c2</p>
<p class="c1 c3">p c1c2</p>
<h>h</h>
<script>
  //1.找到id为d1的标签，字体设为绿色
  $('#d1').css('color','red')

  //2.将类c2的字体设为绿色
  $('.c2').css('color','green')

  //3.将h标签字体设置为蓝色
  $('h').css('color','blue')

  //4.将p标签的c2类，字体设黄色
  $('p.c2').css('color','yellow')
</script>
</body>

组合选择器

$("#id, .className, tagName") //逗号分开代表的是并列关系

<body>
<div class="c1" id="d1"> div c1 d1</div>
<span class="c1 c2"> span c1 c2</span>
<p class="c1 ">p c1</p>
<h>h</h>

<script>
  //将id为d1的标签和类为c2的标签以及h标签，字体设为红色
  $('#d1,.c2,h').css('color','red')
</script>
</body>

层级选择器

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

<body>
<div id = 'd1'>div
  <div>div div
    <span>  |div div span</span>
  </div>
    <h id = 'd2'>div h</h>
    <p>ppppppppp</p>
  <span>|div span</span>
  <p>div p</p>

</div>
<h id = 'd3'>h</h>
<div>divdiv</div>
<script>
    //1.将id为1的标签下的span标签字体设置为红色
    $('#d1 span').css('color','red')

    //2.将id为1的标签下的第一层级下的span标签字体设置为蓝色
    $('#d1>span').css('color','blue')

    //3.将id为d2下紧挨着的p标签，字体设置黄色
    $('#d2 + p').css('color','yellow')

    //4.将id为d3t的p标签，字体设置紫色
    $('#d3~div').css('color','purple')

</script>
</body>

属性选择器

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

</head>
<body>
<div class="c1" username="kevin">11</div>
<input type="text" disabled="disabled">
<input type="password">
<input type="checkbox">

<script>
  //1.获取属性含有username的标签,字体设为红色
    $('[username]').css('color','red')

  //2.获取属性disabled="disabled的标签
    var dis1 = $('[disabled="disabled"]')
  console.log(dis1)  //S.fn.init [input, prevObject: S.fn.init(1)]

  //3.获取input标签中，type="checkbox"的标签
  var inp  = $('input[type="checkbox"]')
  console.log(inp) //S.fn.init [input, prevObject: S.fn.init(1)]

</script>
</body>

jQuery选择器查找标签之后的结果与JS有何区别

jQuery选择器与JS查找标签之后的结果集都是数组，但是功能有区别

$('p')  // S.fn.init(2) [p, p, prevObject: S.fn.init(1)]
document.getElementsByTagName('p')  //HTMLCollection(2) [p, p]

1.如果使用索引取值，那么都标签对象，标签对象是无法调用jQuery提供的方法的

$('p')[0]  //<p style="color: red;">今天周五</p>
document.getElementsByTagName('p')[0]  //<p style="color:red;">今天周五</p>

$('p')[0].css('color','red')//VM1235:1 Uncaught TypeError: $(...)[0].css is not a function
$('p')[0].style.color = 'red'  //'red'
$('p').first().style.color = 'green'   //VM1626:1 Uncaught TypeError: Cannot set properties of undefined (setting 'color')

2.标签对象如果想转换成jQuery对象需要使用：$() ;转换成jQuery对象的目的是为了使用jQuery提供的更多方法

$(document.getElementsByTagName('p')[0]) //S.fn.init [p]0: plength: 1[[Prototype]]: Object(0)
$(document.getElementsByTagName('p'))  //S.fn.init(2) [p, p]

$($('p')[0]).css('color','orange')  //jQuery.fn.init [p]

基本筛选器

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

例子

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

<body>
<ul>
  <li>1111111</li>
  <li>2222222</li>
  <li class="c1">3333333</li>
  <li id = 'd1'>4444444</li>
  <li>5555555</li>
</ul>
<li>66666666</li>
<script>
  //1.li的第一个标签字体变为红色
  $('li:first').css('color','red')

  //2.li的最后一个标签字体变为黄色
  $('li:last').css('color','yellow')

  //3.li标签第6个 字体设为蓝的
  $('li:eq(5)').css('color','blue')

  //4.li标签索引为偶数的标签字体紫色
  $("li:even").css('color', 'brown')

  //5.li标签索引为偶数的标签字体紫色
  $("li:odd").css('color', 'pink')

  //6.li标签索引大于3字体橙色
  $('li:gt(3)').css('color','orange')

  //7.li标签索引小于3字体橙色
  $('li:lt(3)').css('color','pink')

  //8.li标签中，除了id为d1的其他字体为红色
  $('li:not(#d1)').css('color','red')

  //
  $('li:has(.c1)').css('color','blue')

</script>
</body>

表单筛选器

表单筛选器可以看成是属性选择器优化而来 eg：$('input[type="text"]') $(":Text")

表单筛选器	举例	等价于
:text	$(":Text")	$('input[type = "text"]')
:password	$(":password")	$('input[type = "password"]')
:file	$(":file")	$('input[type = "file"]')
:radio	$(":radio")	$('input[type = "radio"]')
:checkbox	$(":checkbox")	$('input[type = "checkbox"]')
:submit	$(":submit")	$('input[type = "submit"]')
:reset	$(":reset")	$('input[type = "reset"]')
:button	$(":button")	$('input[type = "button"]')

表单对象属性

:checked

当下拉列表设置默认值的时候，通过$(":checked")筛选的时候，也会被查找出来

$(":checked")  //[input.c, input.c, input.c, option, prevObject: jQuery.fn.init(1)]

:selected

$(":selected")只能查找下拉列表被设置默认

$(":selected")  // [option, prevObject: jQuery.fn.init(1)]

:disabled

<p><input type="text" class="c" disabled value="不能输入吧">1</p>

$(":disabled")  //S.fn.init [input.c, prevObject: S.fn.init(1)]

<body>
<input type="text" name="" id="">
<input type="radio" value="1" name="gender"> 男
<input type="radio" value="2" checked name="gender"> 女
<select id="s1">
    <option value="beijing">北京市</option>
    <option value="shanghai">上海市</option>
    <option selected value="guangzhou">广州市</option>
    <option value="shenzhen">深圳市</option>
</select>
<script>
  //1.type="text"属性，设置背景颜色
  $(':text').css('backgroundColor','red')

  //2.查找checked= 'checked'标签
  var che = $(':checked')
  console.log(che)  //S.fn.init(2) [input, option, prevObject: S.fn.init(1)]

  //3.查找selected= 'selected'标签
  var sel = $(':selected')
  console.log((sel))  //S.fn.init [option, prevObject: S.fn.init(1)]

  //4.查找disabled = ‘disabled’标签
  var dis = $(':disabled')
  console.log(dis)
</script>
</body>

筛选器方法

jquery调用方法之后返回的结果还是jquery对象，所以你就可以继续点jquery给你提供的方法,这叫链式操作

下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

<body>
<div id="d1">div</div>
<p class="c1">pppppp</p>
<p class="c1">pppppp</p>
<p class="c1">pppppp</p>
<p class="c1">pppppp</p>
<span class="s1" id="i2">span</span>
<p class="c1">pppppp</p>
<script>
  //将id = d1 下的一个标签设置背景边框
  $('#d1').next().css('height','300px').css('backgroundColor','red').css('border','10px solid blue')

  //将id = d1 下的所有标签字体设置为蓝色
  $('#d1').nextAll().css('color','blue')

  //将id = d1 下到id = i2   字体设置为绿色
  $('#d1').nextUntil('#i2').css('color','green')
</script>
</body>

上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素

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

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")----------------->等价于$("div p")
$("div").find("p")----------------->等价于$("div p")
$(".c1").find("a")----------------->等价于$(".c1 a")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的 --- $("div.c1")

补充

1 .first() :获取匹配的第一个元素
  	$('div span:first')-------------->$('div span').first()
2 .last() :获取匹配的最后一个元素
      $('div span:last')----------------->$('div span').last()
3 .not() :从匹配元素的集合中删除与指定表达式匹配的元素
      $('div span:not("#d3")') --------------->$('div span').not('#d3')
4 .has() :保留包含特定后代的元素，去掉那些不含有指定后代的元素。
5 .eq() : 索引值等于指定值的元素

样式操作

1.addClass();  添加指定的CSS类名。
		ps:classList.add()
2.removeClass();  移除指定的CSS类名。
		ps:classList.remove()
3.hasClass();  判断样式存不存在
		ps:classList.contains()
4.toggleClass();   切换CSS类名，如果有就移除，如果没有就添加。
		ps:classList.toggle()

<body>
<div class="c1" id="d1">div</div>
<script>
  //1.给ID=d1的添加属性c2,c3,c4
  var div =$('#d1').addClass('c2').addClass('c3').addClass('c4')
    console.log(div[0])

  //2.给ID=d1的s删除属性c2
  var div1 = $('#d1').removeClass('c2')
  console.log(div1[0])

  //3.判断ID=d1的属性c2在不在
  console.log($('#d1').hasClass('c2')) //false

  //4.c2不再添加，在就删除
  var div2 = $('#d1').toggleClass('c2')
  console.log(div2[0])
    var div3 = $('#d1').toggleClass('c2')
  console.log(div3[0])
</script>
</body>

css操作

可链式操作

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

文本操作

HTML代码：

1.html(): 取得第一个匹配元素的html内容--识别标签
	  eg:
		console.log($('.c1').html())  //<h1>加油</h1>

2.html(val):设置所有匹配元素的html内容 --不识别标签
	.innerHTML = 'val'
   eg：
  	$('.c1').html('看见')

文本值

1.text()/:取得所有匹配元素的内容
	  eg:
		console.log($('.c1').text())  //加油
2.text(val)// 设置所有匹配元素的内容
	.innerText = 'val'
		eg：
		 $('.c1').text('遇见')

<body>
<div class="c1"><h1>加油</h1></div>
<input type="text" id="inp1" value="hahahaha">
<script>
  console.log($('.c1').html())  //<h1>加油</h1>
  console.log($('.c1').text())  //加油

   $('.c1').html('看见')
    $('.c1').text('遇见')
</script>

</body>

值

1.val():取得第一个匹配元素的当前值
				eg:
			   console.log($('#inp1').val()) //hahahaha
2.val(val):设置所有匹配元素的值
				eg:
				var inp = $('#inp1').val('helloworld');
        console.log($('#inp1').val());  //helloworld
3.val([val1, val2]):设置多选的checkbox、多选select的值

文本登陆案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
      <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
<form action="">
<div>
    <label for="user_name">
  用户名：<input type="text" id = 'user_name' name = 'name'>
</label>
  <span class="error"></span>
</div>
<div>
  <label for="pass_word">
  密码：<input type="password" id = "pass_word" name = 'password'>
</label>
  <span class="error"></span>
</div>
<div>
    <input type="button" value="提交" id = 'btn'>
</div>
</form>
<script>
  var btn = $('#btn');
  btn.click(function () {
    //1.获取用户密码、值
    var username = $('#user_name').val()
    var password = $('#pass_word').val()

    //2.判断值是否为空
    if (!username){
      $('.error:first').text('用户名不能为空')
    }
    if (!password){
      $('.error:last').text('密码不能为空')
    }
  })

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

页面定时器案例

有一个input框、两个按钮（一个开始、一个结束）
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug，连续多次点击开始按钮，再试试能不能结束(思考如何解决)

搜索框案例

input内有默认的文本值用户一旦选择该input想做内容修改就提前把内容清空

标签：jQuery,color,标签,li,var,操作,div,选择器,css
From： https://www.cnblogs.com/luonacx/p/17334679.html

事件 jQuery 选择器 筛选器 样式操作 CSS操作 文本操作

事件