//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最下方