码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础

时间:2019-02-05 22:25:51      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:btn   .sh   NPU   元素   query   ima   简单   sel   事件处理   

简介

快速简洁的JS框架,封装JS常用功能代码,提供一种简便的JS设计模式,优化HTML文档操作,事件处理,动画设计和Ajax交互。

闭包:使用更大作用域的变量来记录小作用域变量的值

  1. 直接全局区域,容易同名覆盖
  2. 使用对象封装,对象还是会被覆盖
  3. 使用工厂模式,函数还是可能会被覆盖
  4. 匿名函数自调用,只能加载的时候调用一次,且数据无法获取
  5. 使用闭包,将数据一次性挂在到window对象下

jQuery选择器

//id选择器
var inp = $("#uname");
inp.val();  //只有一个元素
//标签选择器
var inps = $("input");//返回数组
inps[1].value;

//类选择器
var inps = $(".common");
//组合选择器
var eles = $("h3, input");  //所有h3和input标签
//子选择器
var inps = $("div>input");  //所有div下的input子元素

var inp = $("input:first"); //第一个input元素

var tds = $("td:not(td[width])");   //去掉有width属性的td
//简单
first, last,not,even,odd,eq(index),gt,lt,header,animated
//内容
contains(text)
empty
has(selector)
parent
//可见性
visible
hidden
//属性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]  //以某些值开始
[attribute$=value]  //以某些值结束
[attribute*=value]  //包含某些值
[selector1][selector]   //同时满足多个条件
//子元素
nth-child
first-child
last-child
only-child
//表单
//表单对象属性

属性

var uname = $("#uname");
uname.attr("type");     //获取属性
uname.attr("value");    //不实时
uname.val();    //实时
uname.attr("type", "button");   //设置属性

操作元素内容

<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>

var showdiv = $("#showdiv");
showdiv.html();     //返回标签内所有内容
showdiv.html("<b>xxxx</b>");    //修改标签内容,包括标签本身

showdiv.text();     //返回标签内内容,不包括标签
showdiv.text("<i>xxx</i>");     //不解析标签

操作元素样式

showdiv.css("background-color", "orange");  //增加
showdiv.css("width");       //获取

div.css({"border":"solid 1px","width":"300px","height":"300px"});   //json格式

div.addClass("common");     //追加
div.removeClass("dd");      //删除样式

操作文档结构

//元素内部插入
div.append("<i>sfaf</i>");  //内容解析,页面内容增加

$("#u1").appendTo("#showdiv");  //将元素外面的对象追加到里面,页面内容移动

prepend //加到前面
prependTo   //

//元素外部插入
div.after("<b>xxx</b>");    //在div后面插入
div.before("<b>xxx</b>");   //在div前面插入
div.insertAfter();      //将匹配的内容插入后面,只是移动,并不增加
div.insertBefore();     //将匹配的内容插入前面,只是移动,并不增加

//包裹
wrap/unwrap
wrapAll
wrapInner

//替换
replaceWith
replaceAll

//删除
empty
remove
detach

//克隆
clone

操作事件

$("#btn2").bind("click",function(){alert("xxx")});  //追加,一个事件绑多个
$("#btn2").bind("click");   //解绑事件,只能解绑bind添加的
$("#btn2").one("click",function(){alert("xxx")});   //触发执行一次性即失效,可以添加多个,可以unbind解绑

页面载入事件
window.onload=function(){}; //js方式
$(document).ready(function(alert("1")));    //jquery方式,追加
$(document).ready(function(alert("2")));

动画

$("#showdiv").show(3000);   //3秒逐渐显示
$("#showdiv").hide(3000);   //3秒逐渐隐藏
toggle  //切换元素隐藏状态,效果同上

slideDown   //高度逐渐增加
slideUp     //高度逐渐缩小
slideToggle 

fadeIn      //淡入
fadeOut     //淡出

jQuery基础

标签:btn   .sh   NPU   元素   query   ima   简单   sel   事件处理   

原文地址:https://www.cnblogs.com/logchen/p/10353225.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!