011-jQuery基础

2019 09 30

什么JQuery:
jq是通过js实现的，不是为了完全替代js

生产版本:体积小，执行速度快

开发版本:有良好的注释，代码风格好，便于阅读

优点：
	1.写更少的代码，做更多的事情,简化代码量
	2.js 和 html 分离
	
为什么要学习jq
	提高工作效率

JQ的入门

【JQ中根据ID查找元素】

全都是根据选择器去找的
#ID{}
.类名{}
$("#ID的名称")

jq的开发步骤

1.导入jq相关文件
2.文档加载函数$(function(){}):   页面初始化之后，绑定事件，动画
3.确定相关操作的事件
4.事件触发函数(回调函数)
5.函数里面去操作相关的元素

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

• ID选择器 : #ID的名称
• 类选择器: 以 . 开头 .类名
• 元素选择器: 标签的名称
• 通配符选择器: *
• 选择器,选择器: 选择器1,选择器2

​

JQ中的层级选择器

• 子元素选择器: 选择器1 > 选择器2
• 后代选择器: 选择器1 儿孙
• 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
• 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟

JQ中的基本过滤器

<script type="text/javascript">
			$(function() {
				$('#btn1').click(function() {
					$('div:first').css('background-color','pink');
				});

				$('#btn2').click(function() {
					$('div:even').css('background-color','deeppink');
				})

				$('#btn3').click(function() {
					$('div:odd').css('background-color','hotpink');
				})

				//gt  great than 大于
				//lt  less than 小于
				//eq  equlas 等于
				$('#btn4').click(function() {
					$('div:eq(2)').css('background-color', 'lightblue');
				})
			})
		</script>

JQ中的属性选择器

<script type="text/javascript">
		$(function() {
			//通过属性选择器找到含title的a标签
			$('a[href]').css('color', 'red');
			//找多个属性
			$('a[href][title]').css('color', 'pink');
			//属性值确定
			$('a[href][title="test2"]').css('color', 'deeppink');
		})
	</script>

JQ中的表单过滤器

<script type="text/javascript">
		$(function() {
			//:表单类型
			$(':text').css('backgroundColor','pink');

			$('#btn').click(function() {
				$('select option:selected').css('backgroundColor', 'red');
				alert($('select option:selected').size());
			});
		})
	</script>

JQ和JS之间的转换

<script type="text/javascript">
		$(function() {
			//给按钮绑定事件
			$('#btn').click(function() {
				//$('#div1').html('修改内容');
				//$('#div1').innerHTML = '1111';

				//将jq转换成js
				// var jsDiv = $('#div1')[0];
				// jsDiv.innerHTML = '111';

				//将js转换成jq
				var div = document.getElementById('div1');
				// div.html('111');
				var $div = $(div);
				$div.html('222');
			})
		});
	</script>

jq选择器

• 基本选择器
  • ID #id名
  • 类选择器 .类名
  • 元素选择器 标签名称
  • 通配符选择器 *
  • 并集选择器 选择器1,选择器2
• 层级选择器
  • 后代选择器 选择器1 选择器2
  • 子元素选择器 选择器1>选择器2
  • 相邻 +
  • 所有弟弟 ~
• 过滤选择器
  • 第一个元素 :first
  • 最后一个 :last
  • 偶数 :even
  • 奇数 :odd
  • 大于 :gt
  • 小于 :lt
  • 等于 :eq
• 属性选择器
  • 选择器[属性] 单个属性
  • 选择器[属性1 ] [属性2 ] 多个属性
  • 选择器[] [属性= 属性值] 确定的属性值
• 表单过滤器
  • ：text
  • option:selecte
• js和jq的转换
  • js转jq
    • $(js对象)
  • jq转js
    • jq对象[0]