前端之jQuery

一、jQuery 框架（模块）也称'类库'：帮你封装了原生的js代码，兼容多浏览器，书写简单。

一、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。

在声明一个jQuery对象变量的时候在变量名前面加上$

如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法

例如：$("#i1").html()

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法

注意：

1.产生jQuery对像

  var $variable = jQuery对像

2.产生DOM对象

var variable = DOM对象

3.jQuery对像 转成 DOM对象

   $variable[0]

4.DOM对像 转成 jQuery对象

  $(DOM对像)

5:例子：

$("#i1").html();           //jQuery对象可以使用jQuery的方法     $("#i1")    是jQuery对象

$("#i1")[0].innerHTML;     // DOM对象使用DOM的方法             $("#i1")[0]  是DOM对象

例子1

例子2

 二、CDN服务

BootCDN 中有
jQuery Bootstrap react ...
只需要保证计算机有网 你就不需要下载对应的文件

二、jQuery基本语法

jQuery()  等价于 $()

$(选择器).action{属性值}                (******************)


1、基本选择器   （配合使用、组合选择器**********************************************************）

2、层级选择器

3、基本筛选器

 例子1:

 

4、属性选择器

 例子1：

5、表单筛选器

 

 例子1：

 

 例子2：

$(':checked') 会将checkbok和option默认的选中标签的全部拿到。针对该情况需要你查找条件要更加精确

 

6、筛选器

 

 例子：下一个元素

 

例子：上一个元素

 

例子：父亲元素

例子：儿子和兄弟元素

 查找：搜索所有与指定表达式匹配的元素

例如：$(''div'').find(''p'')   等价于 $(''div  p'')

筛选：筛选出与指定表达式匹配的元素

例如：$(''div'').filter(''.c1'')  等价于 $(''div.c1'')

补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
例子：

7、对标签的操作

    01、对 标签的样式 操作

    02、对 标签的位置  操作

例子1：

例子2：

    03、对 标签或者标签中文本的尺寸 操作

    04、对 标签中的文本 操作

text()  表示：获取标签内部文本                相当于原生 js的innerText()

html() 表示：获取标签内部的 文本加标签    相当于原生js的innerHTML()

 

 例子：

    05、对 标签中的属性 操作

注意：针对checkbox和radio这些选中之后有checked属性的标签，你在用attr获取时会出现问题

h解决问题建议：使用prop获取checked属性：1.返回的结构是布尔值。2.还可以设置是否选中

attr 与 prop 的区别

例子：

 

 

    06、在html 页面中 添加标签

注意：clone() 默认只克隆文本和样式，你可以加参数true 表示克隆文本和样式和事件

 例子1：

 

 例子2：

 

8、事件：达到一定条件之后就自动触发

01、常用事件

 02、事件绑定

jQuery绑定事件的两种方式

第一种：

语法结构：
     $(选择器).事件名(funtion(){})

比如：

     $('.btn').click(function(){
      // 事件代码 })

 第二种：

语法结构：
     $(选择器).on(事件名,function(){})

比如：

    $('.btn').on('click',function(){
// 事件代码})

注意：文档加载：尽量保证在页面内容加载完毕之后再加载js代码

实时获取input框内部用户输入

input事件

$('input').on('input',function(){$(this).val()})

03、阻止标签后续事件的执行

1.方式1
return false
2.方式2
$('#d1').click(function (e) {
// 阻止标签后续事件的运行
e.preventDefault() //
})

04、事件冒泡：儿子会将时间一层层传递给父标签 如果父标签页有对应的时间 那么也会触发 

阻止事件冒泡方法：

$('span').on('click',function (e) {
e.stopPropagation() // 阻止事件冒泡
});

05、事件委托：提前规定好某一边区域应该有什么时间 并且这个时间一旦发生应该由谁来执行

9、文档加载

1 $(document).ready(function(){ // js代码 })
2 简写：$(function(){ // js代码 })
3 直接写在body最下方

10、.each()   表示：遍历一个jQuery对象，为每个匹配元素执行一个函数。

01、$.each(可迭代对象，function(index,obj) {})

02、$('div').each(function(index,obj) {} )

11、data()

能够让标签帮你存储一些值
$('div').data('username')
$('div').data('username','jason')
$('div').removeData('username')