jQuery

目录

jQuery安装

通过cdn引入

jQuery函数   $

jquery对象 $()参数:

jquery选择器

jquery事件机制

绑定事件

on    

bind

one

  解绑事件

off

unbind 

    模拟点击事件 trriger

    事件代理 on('click','要代理的子元素对象',事件处理程序)

jQueryDom操作

jQuery 拥有可操作 HTML 元素和属性的强大方法

静态方法

---

jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。

 jQuery功能： 使用CSS选择器进行元素查询 事件机制 Dom操作 属性操作 工具方法 Ajax

jQuery安装

通过cdn引入

```<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>```

jQuery函数   $

console.log($,'jquery函数',typeof $);

jquery对象 $()

console.log($(),'jquery对象',typeof $());

console.log($() instanceof Object);

jquery对象 $()参数:

    1.函数
    2.dom元素
    3.选择器字符串
    4.html代码片段字符串

jquery选择器

1. 基本选择器  

2. 层次选择器

3. 伪类选择器  

4. 伪元素选择器

5. 属性选择器

jquery事件机制

绑定事件

on    

on(事件类型,传参（可选）,事件处理程序)

$(function(){
			var btn=$('button:first');
			// 绑定事件 on(事件类型,传参（可选）,事件处理程序)
			btn.on('click',[1,2,3],function(event){
				console.log(event,'事件对象');
				console.log(event.data);
				$(event.target).html('不想被点');
			});

bind

   bind绑定 参数(事件类型,参数(可选),事件处理程序)

$(function(){
			var btn=$('button:first');
// 绑定事件方法 bind绑定 参数(事件类型,参数(可选),事件处理程序)
			btn.bind('click',[1,2,3],function(e){
				console.log(e,'事件对象');
			});
			

one

$(function(){
			var btn=$('button:first');
			// one 绑定事件
			btn.one('click',function(e){
				console.log('我被绑定了',e);
			});

  解绑事件

off

$(function(){
			var btn=$('button:first');
			// 绑定事件 on(事件类型,传参（可选）,事件处理程序)
			btn.on('click',[1,2,3],function(event){
				console.log(event,'事件对象');
				console.log(event.data);
				$(event.target).html('不想被点');
// 解绑事件
			btn.off('click');
			});

unbind 

unbind()无参代表全部解绑事件

$(function(){
			var btn=$('button:first');
// 绑定事件方法 bind绑定 参数(事件类型,参数(可选),事件处理程序)
			btn.bind('click',[1,2,3],function(e){
				console.log(e,'事件对象');
//无参代表全部解绑事件
                 btn.unbind();
			});
			

    模拟点击事件 trriger

$(function(){
			var btn=$('button:first');
// 绑定事件方法 bind绑定 参数(事件类型,参数(可选),事件处理程序)
			btn.bind('click',[1,2,3],function(e){
				console.log(e,'事件对象');
// 模拟点击事件
			btn.trigger('click');

			});

    事件代理 on('click','要代理的子元素对象',事件处理程序)

$(function(){
			var btn=$('button:first');
// 事件代理 on(事件类型,代理对象,事件处理程序)
				$('body').on('click','button',function(){
					$('button').html('我被点击了')
				})
		
			
			});
// 事件类型
			$('button').dblclick(function(){
				console.log('我被双击了');
			});
			$('button').mouseenter(function(){
				$(this).css({
					backgroundColor:'red'
				})
			});

)}

jQueryDom操作

插入方法：

append：在被选元素的结尾插入内容（仍然在该元素的内部）

appendTo：在被选元素的开头插入内容

prepend：在被选元素的开头插入内容

before： 在被选元素之前插入内容

after：在被选元素之后插入内容

insertBefore、insertAfter、prependTo。。。

包裹方法：wrap、unwrap、wrapAll、wrapInner、

替换方法：replaceWith、replaceAll

移除方法：empty、remove、detach

克隆方法：clone

$(function(){
			// append插入内容到元素尾部
			$('div:first').append('<p>我是一个p标签</p>');
			// 创建一个div添加到body尾部
			$('<div>我是块级元素</div>').appendTo('body');
			// 克隆节点 针对事件 浅克隆不克隆事件 深克隆克隆事件
			$('button:first').click(function(){
				console.log('我被点击了');
			})
			// clone方法无参 浅克隆 有参true 深克隆
			$('button:first').clone(true).appendTo('body');
			// 获取div的id属性值
			// attr:参数1 获取该属性名对应的属性值
			// 参数:2 给当前dom元素设置/修改属性
			console.log($('div:first').attr('id','newId'));
			// removeAttr 删除属性
			$('div:first').removeAttr('title');

			// 添加类名
			$('div:first').addClass('active');
			// 删除类名 删除对应的样式
			$('div:first').removeClass('two');
			// 切换类名 --对应的是删除或者是添加类名 
			$('div:first').click(function(){
				$(this).toggleClass('active')
			});


			// 获取body标签内部的内容
			console.log($('body').html());//innerHTML 识别代码片段
			console.log($('body').text());//innerText
		})

属性操作

在dom中，我们通过setAttribute/getAttribute/style来操作元素属性，jQuery中提供了更加便捷的方法：

属性：attr、removeAttr、prop、removeProp css：addClass、removeClass、toggleClass、wrapInner、

内容：html、text、val

jQuery 拥有可操作 HTML 元素和属性的强大方法

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

静态方法

    $ jQuery

    each
    遍历对象 function(key,value)
    遍历数组 function(index,item

 

// 遍历对象
var obj = {
    name: 'zach',
    age: 18,
    height: '1.88'
}
// 第一个参数 要遍历的数组或对象 第二个参数 处理函数
$.each(obj, function (key, value) {
    console.log(key, value);
})
//遍历数组
$.each( [0,1,2], function(i, n){
    alert( "Item #" + i + ": " + n );
});

    map   映射 参数:要操作的数组 回调函数

var arr=$.map( [0,1,2], function(n){
  return n + 4;
});

    merge 合并数组

// 合并数组 merge 
			console.log($.merge([1,2,3],[4,5,6]));

    type()

    param 将对象转成查询字符串

var obj = { page: 1, age: 12 }
var str = jQuery.param(obj);
console.log(str);

    parseJOSN 将json字符串对象转成js对象

// 原生js:
// JSON.parse(jsonString) json字符串 转 js对象/数组
// JSON.stringify(jsonObj/jsonArr) js对象/数组 转 json字符串
// 2.$.parseJSON(json): 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}'// 模拟一个json对象
console.log($.parseJSON(json)); // 将json对象转换为js对象
json = '[{"name":"Tom", "age":12},{"name":"lilly", "age":12}]';// json数组
console.log($.parseJSON(json));// 将json对象转换为js数组

    trim() 去除字符串得前后空格

console.log('--'+$.trim(" hello, how are you? ")+'--');