jQuery教程

标签：jQuery function 教程标签 div id 属性

jQuery介绍
- jQuery的优势
- jQuery对象
选择标签
ID选择器
选择器更多方法
操作标签
- 创作标签/添加标签
绑定事件
取消后续事件

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。

通过查询标签的方法把一个标签生成为 jQuery对象

选择标签

ID选择器

xxxEle = $('#id')

通过标签id获得标签对象

标签选择器

xxxEle = $('tagName')

通过标签名查找标签，获得一个对象数组里面有多个标签对象

class选择器

xxxEle = $('.className')

通过标签内classs属性的name来查找标签

联合查询

$('div.c1')
//找到所有拥有C1 class类名的 div标签

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

x和y可以为任意选择器

基本筛选器

xxxEle = $('tagName')

$('tagName').first()
//查询这个标签数组里面的第一个

$('div.c1').last()
//div标签里面class属性为c1的标签数组 里最后一个

$('div.c1').eq(2)
//div标签里面class属性为c1的标签数组 索引为2的标签对象

$('div.c1:gt(1)')
//数组内所有索引大于1的标签

$('div.c1:lt(1)')
//数组内所有索引小于1的标签



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

属性选择器

$('[username]')
//查找到所有含有username属性名的标签

$('[username ="moon"]')
//查找到所有属性名为username和值为moon的标签


例子：
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

层级选择器

$('div p')
// 查询div标签里面的后代 p标签

$('div>p')
// 查询div标签里面的儿子标签 p

$('div+p')
// 查询div同级别下面紧挨的p标签

选择器更多方法

 	  $("#id").next()
    //标签对象的 下一个元素
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
	  $("#id").prev()
    //标签对象的 上一个元素
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    $("#id").parent()
    //标签对象的 父级一个元素
    $("#id").parents()  // 查找当前元素的所有的父辈元素
    $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
    $("#id").children();// 儿子们
    $("#id").siblings();// 兄弟们

操作标签

操作CSS属性

$('p').addClass('className')
// 添加指定的CSS类名。

$('p').removeClass('className')
// 移除指定的CSS类名。

$('p').hasClass('className')
// 判断样式存不存在 得到结果 ture  false

$('p').toggleClass('className');
// 切换CSS类名，如果有就移除，如果没有就添加。


$("p").css("color", "red");
//设置标签p的css样式（属性名，属性值）

返回网页指定位置

$(window).scrollTop()
//获取网页滚动条位置

$(window).scrollTop(1)
//一键返回页面顶部 

$(window).scrollTop(9999)
//一键到页面底部

标签内文本操作

$('p').text()
// 获取标签内的文本内容

$('p').text('可以设置新文本')
// 获取标签内的文本内容

$('input').val()
// 获取标签内的属性值

$('input')[0].files
// 获取文件内容



<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
//获取标签内 多个值


1.创作一个标签

$('<a>')
//('直接填写标签名')

$('a').text('给A标签添加文字')

$('div').append('<a>')
// 把B追加到A

标签内属性操作

$('<a>').attr('name')
//获取标签的属性值

$('span').attr('name','moon')
//给标签添加属性和设定值

$('<a>').attr('href','https://www.baidu.com/')
//给标签添加属性值

$('a').removeAttr('href')
//给标签移除这个属性

.attr方法 无法获取动态变化的数据

如果需要获取动态的数据

我们在处理checkbox和radio的时候尽量使用特定的prop()

<input type="checkbox" id="D1" value="1">
$("#D1").prop("checked")  
// false  判断是否被选中


prop不支持获取标签的自定义属性。

创作标签/添加标签

$('<a>')
//('直接填写标签名')

$('<a>').attr('href','https://www.baidu.com/')
//给标签添加属性值

$('a').removeAttr('href')
//给标签移除这个属性

$('a').text('给A标签添加文字')

$('div').append('<a>')
// 把a追加到div标签内

$(A).prepend(B)// 把B前置到A

删除标签

$(A).remove()
//删除标签 并 删除标签内的所有内容

$(A).empty()
//删除表期内所有内容 保留标签

绑定事件

直接使用jQuery对象点事件

语法:

$('#di').click(function(){...})
//给标签id di 绑定单击事件

hover(function(){...})
悬浮事件
blur(function(){...})
失去焦点
focus(function(){...})
聚焦
change(function(){...})
文本域变化
keyup(function(){...})


方式一；

$('#di').click(function(){...})
//也支持直接绑定多个对象 
//$('div').click(function(){...})

方式二：

$('#di').on（'事件名称'）(function(){...})


input输入框时时监听事件
$("#d1").on("input", function () {
  })
//input输入框时时监听事件
                               
$("#d1").click(function(){
  $("#d1").append($(this).clone(true))
})

取消后续事件

1.取消后续事件
	事件函数的最后return false即可
2.阻止事件冒泡
	事件函数的最后return false即可
3.等待页面加载完毕再执行代码
	$(function(){})				   缩略写法
 	$(document).ready(function(){})  完整写法
4.事件委托
	主要针对动态创建的标签也可以使用绑定的事件
 	$('body').on('click','button',function(){})
 	将body内所有的单击事件委托给button标签执行

标签：jQuery,function,教程,标签,div,id,属性
From： https://www.cnblogs.com/moongodnnn/p/16964459.html