jQuery框架使用，jq选择器，jq操作页面内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息，js/jq页面加载完毕事件，jq事件

// 获取所有的页面元素jq对象 ???$(‘css3选择器语法‘); ???var $box = $(".box:nth-child(1)"); ?获取的是jq对象数组// 拿到指定的页面元素jq对象 ???$(‘css3选择器语法‘).eq(index); ???var $box = $(".box").eq(1); ?????获取的是jq对象数组// jq 转 js ?（ jq对像就是由数组包裹的js对象 ） ???box1 = $box[0] 从数组里取出来 ???box1 = $box.get(0) 从数组里取出来// js 转 jq ???$box1 = $(box1);

$(".box").eq(1).text("100") ??// jq获取标签内容,修改标签内容$(".box").eq(1).text("100").html("<b>xxx</b>") ?????// jq支持链式操作$(".box").eq(1).css("color","red") ????// 修改css样式操作$(".box").eq(1).css("font-size","30px") $(".box").eq(1).css({ ???// 已字典的形式添加css样式 ???color:"red", ???"font-size":"30px",})$(".box").eq(1).css("border-radius") ??// jq能获取计算后样式

$(".box").eq(1).addClass("red") ???// 添加类名$(".box").eq(1).removeClass("red") ???// 删除类名 ?jq链式操作

$(".box").eq(1).addClass("red").removeClass("red") ??// jq链式操作

$("img").attr("src","/img/1.js")； ?// 设置属性
$("img").attr("src")； ??// 查看全局属性$("img").removeAttr("src")； ??// 删除全局属性

$(".box").width();$(".box").height(); ?宽高$(".box").innerWidth(); ?内边距 + 宽高$(".box").outerWidth(); ?边框 + 内边距 + 宽高$(".box").outerWidth(true); ?外边距 + 边框 + 内边距 + 宽高

// 相对窗口偏移: 算margin产生的距离console.log($(‘.box‘).offset().top, $(‘.box‘).offset().left);// 绝对定位偏移(top,left): 不算margin产生的距离console.log($(‘.box‘).position().top, $(‘.box‘).position().left);

jq页面加载完毕事件 ???$(document).ready(function () { ???????console.log(‘xxx‘) ???}) ???一般写成： ???$(function(){ ???????console.log(‘xxx‘) ???}) 简写,可以保证页面加载完毕,还能保证jq局部变量js页面加载完毕事件 ???window.onload = function () {}

// 方法一（推荐）$(‘.box‘).on( "click",function() {} )$(‘.box‘).on( "click",function(ev) { ???ev.data.aaa ??// 跟js事件对象一样})// 方法二$(".box".click( function() {}) )// 右键事件，取消系统默认事件$(‘.sup‘).on(‘contextmenu‘ , function(ev) { ???ev.preventDefault(); ??//取消事件 ???或者 return false; ?// 取消事件})// 事件冒泡：子父级拥有同样事件，子响应事件会传播到父级// 子集点击事件：$(‘.sup‘).on(‘contextmenu‘ , function(ev) { ???ev.stopPropagation(); ?// 阻止子集事件冒泡})