jquery简介

jQuery概述

为了简化JavaScript的开发，一些JavaScript程序库诞生了。JavaScript程序库封装了很多预定义的对象和实用函数，能帮助使用者轻松地建立有高难度交互的页面，并且兼容各大浏览器.

jQuery是什么:是一个javascript程序库.

JS是语言，jQuery是建立在这个语言上的一个基本库(框架)，利用jQuery可以更简单的使用JS.

jquery导入

<script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    
</script>

jquery的DOM操作

html里面存在一个问题因为代码都是从上到下执行的,那么如果你的juqery代码是放在body上面,那么就会先加载功能在加载页面,为了提高用户的体验采取以下方法

$(function(){
  jquery代码
})

1. 获取节点

jquery的命名格式建议用$变量名表示这样能容易区分是原生的还是jquery变量

$box = $('#box') // 获取id为box的节点
$box = $('.box') // 获取class为box的节点
$box = $('p') // 获取p标签
# 就juqery与js的转换
$box = $('#box')
box = $box.get(0)
或
box = $box[0]
​````````````````````````
box = document.getElementByID('box')
$box = $(box)

1. 层级选择器

$box = $('#box a') // 获取id为box下面的a标签节点(不是子节点是box下面的所有)
$box = $('#box > a') // 获取id为box下为a标签的子节点
$box = $('#box + a') // 获取id为box后面第一个同层级a标签
$box = $('#box ~ a') // 获取id为box后面所有同层级的a标签

1. 伪类选择器

- :first 匹配找到的第1个元素
- :last  匹配找到的最后一个元素
- :eq(index) 匹配一个给定索引值的元素
  $('.text:eq(1)').html('下标为1的元素')
  $('.text').eq(1).html('下标为1的元素')
- :even 匹配所有索引值为偶数的元素 【注意：标签从0开始编号的】
- :odd 匹配所有索引值为奇数的元素
- :gt(index) 匹配所有大于给定索引值的元素
- :lt(index) 匹配所有小于给定索引值的元素
- :not() 去除所有与给定选择器匹配的元素
  $('p:not(.text)').html('没有.text')

1. 节点元素

$box = $('#box')
$box.html('文本') // 获取box里面的文本内容,如果有填写文本则修改
$box.value('属性值') // 获取box里面的value值,如果有填写属性值则修改
#样式操作
$box.css(属性,属性值) // 一个
$box.css({属性:属性值,属性:属性值....}) // 多个
#属性值操作如src,name这些
$box.attr(属性) // 获得该节点属性的属性值
$box.attr(属性,属性值) // 修改属性的属性值
$box.attr({属性:属性值,属性:属性值....}) // 修改多个属性的属性值
$box.removeAttr('属性') // 移出属性
$box.addClass(class名) // 给节点添加class属性
$box.removeClass(class名) // 删除class元素

1. 创建节点

var $p = $('<p>文本</p>') // 创建p的元素节点

1. 删除节点

var $box = $('#box')
$box.remove()

1. 插入节点

var $box = $('#box')
var $p = $('<p>文本</p>') 
$box.append($p) // 在box最后面插入p子节点
$p.appendTo($box) // 在box最后面插入p子节点
$box.prepend($p) // 在box下的最前面插入p子节点
$p.prependTo($box) // 将p子节点插入到box的最前面

1. 克隆节点

var $box = $('#box')
var $newbox = $box.clone()

1. 替换节点

var $box = $('#box')
var $p = $('<p>文本</p>') 
$box.replace($p) // 将box节点替换成p节点

事件绑定

• bind绑定

var $box = $('#box')
$box.bind('click',function(){
  
})

• 直接函数绑定

var $box = $('#box')
$box.click(function(){
  
})

但有个问题上诉两个方法只会绑定最初存在在代码内的节点,对于还未产生的节点不会绑定

$p = $('box p')
$p.bind('click',function(){
  $box.append('<p>test</p>')
})
上诉代码中,最初的box下面只有个一个p标签,而你点击这P标签的时候会在box后面追加一个p标签,但后续添加的p标签就不存在点击事件,只有最初的那个有

• 用on绑定可解决此问题

var $p = $('p')
$p.on('click','p',function(){
  
})// 'p'不填的时候会照成和上述两个方法一样的问题,但也能绑定,但如果想让后续产生的也有绑定事件,那就在第二个参数中填入后续要绑定的元素