//jQuery与JavaScript在申明变量的区别:
var $variable = jQuery对象
var variable = DOM对象
$variabl[0] //jQuery对象转换成DOM对象
//拿上面的例子举例,jQuery对象和DOM对象的使用:
$("#i1").html(); //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; //DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
基本选择器
语法结构
// $(选择器).action(操作)
$('p') // 标签选择器
$('.c1') // 类选择器
$('#d1') // id选择器
$('p.c1') // 找含有c1样式类的p标签
$('p#d1') // 找含有id是d1的p标签
$('#d1,.c1,div') // 组合选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
筛选器
下一个元素:
1 $("#id").next(); //筛选出下一个元素
2 $("#id").nextAll(); //筛选出下面所有的元素
3 $("#id").nextUntil("#i2"); //筛选出下面所有的元素,找到ID为i2终止
上一个元素:
$("#id").prev(); //筛选出上一个元素
$("#id").prevAll(); //筛选出上面所有的元素
$("#id").prevUntil("#i2"); //筛选出下面所有的元素,找到id为i2终止
父亲元素:
1 $("#id").parent(); //parent() 方法返回被选元素的直接父元素。
2 $("#id").parentsAll(); //parentsAll()返回被选元素的所有祖先元素
3 $("#id").parentsUntil(); //parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。
子元素和同级元素:
$("#id").children(); //所有子元素
$("#id").siblings(); //所有同级元素
查找元素:
$("id").find()
1.表单筛选器
js绑定事件的语法
var
xxxEle = document.getElementBy...
xxxEle.on + 事件名 = function()
{
// 事件代码
}
jQuery绑定事件的语法
第一种语法结构:
$(选择器).事件名(function()
{
// 事件代码
})
第二种语法结构 用处更广
$(选择器).on('事件名', function()
{
// 事件代码
})
//实时监测input内部输入变化
$('input').on('input',function () {
// 获取用户输入的内容
console.log($(this).val())
})
// 如何阻止标签后续的事件
// 方式1
// return false
// 方式2
// e.preventDefault()
文档加载
js中
window.onload = function()
{
// 在这里写你的JS代码...
}
jQuery中
$(document).ready(function()
{
// 在这里写你的JS代码...
})
$(function(){
// 你在这里写你的代码
})
上面两种了解即可 我们直接写在body最下方