jq基础

$(function() {
          $(".dd").attr("class","cc").append("<h1 style=‘text-align:center‘>我曹类 </h1>");
})

attr()直接控制标签属性

$(function() {
          $("<h4> $() 可以写成 $(document).ready()</h4>").appendTo("body");
})

/*相当于多次js中window.onload*/

$(function(){
        $("<div class=‘inser‘>来,插一段故事,跟我并列</div>").appendTo("body");
        $("<p>我的故事,插在后面</p>").insertAfter(".inser");
        $("<p>我的故事,插在前面</p>").insertBefore(".inser");
        $("<p>我的故事</p>").appendTo(".inset");
})

/*DOM操作*/

$(function() {
               var rr = " 123456789 ";
               rr = $.trim(rr);
               console.log(rr + " " + rr.length);
})

/*$ 作为功能函数的前缀*/
/*例如去空格trim方法*/

window.onload = function(){

var cla = document.getElementsByClassName("aa")[0];
/*js可以直接控制拿到,className,和id*/
cla.id = "gg";
cla.className = "cc";
cla.onclick = function(){
alert("改变id");
cla.id="";
alert("改变className");
this.cc = function(){
cla.className = "";
}
this.cc();
}

}

$(function() {
                var ff = $.boxModel ? "w3c标准" : "IE"
                alert("目前支持的是" + ff + "盒子模型")
})

/*盒子模型 用$.boxModel检测*/

$(function() {
/*$.each*/
var gg = new Array();
gg[0] = "第一个";
gg[1] = "第二个";
gg[2] = "第三个";
gg[3] = "第四个";
$.each(gg, function(index, value) {
console.log("序号为:" + index + " 值为:" + value);
})

var dd = {
a: 1,
b: 2,
c: 3
};
$.each(dd, function(shu, value) {
var uu = new Array();
if(value>2){
i++;
var i=0;
uu[i] = value;

}
$.each(uu, function(index,value) {
alert("序号为:"+index+"值为:"+value);
});
})
// $.each($.browser,function(property,value){
// console.log("浏览器名:"+property+"值为:"+"value");
// })
/*数据过滤*/
$(function() {
var hh = [1, 2, 3, 4, 5, 6, 7, 7, 8, 9, 9]
var zhenghe = $.grep(hh, function(index, value) {
return value>4;
})
console.log(hh.join("-"));/*join()函数是获取数组的值*/
console.log(zhenghe.join("-"));
})
/*数组转化*/
$(function(){
var shuzu = ["a","b","c","d"]
var de = $.map(shuzu,function(b,a){/*map作用在于,第一个值变为值,第二个为属性或者序号*/
return(b+a);
})
document.body.innerHTML = de;
})

$(function(){
$(".tian4").on("click",function(){
$(this).css({
background:"#ddd",
fontSize:"24px"
})
})
.on("mouseout",yichu = function(){/*关键在on*/
$(this).css({
background:"#fff",
fontSize:"14px"
})
})
$(".tian4").unbind("mouseout",yichu);/*移除 unbind*/
})

/*jq事件监听*/

时间: 2024-10-03 11:13:15

jq基础的相关文章

JQ基础知识

2017-04-19 JQ基础完成复习时间:20:00已经理解的知识点:一.JQ对象: 1.获取JQ对象,需早变量前面加上$: 2.DOM对象转JQ对象: var user = document.getElementById("d"); var $user = $(user); 3.JQ对象转DOM对象: var $user = $("#username"); var user = $user[0]; //也可通过.get(index)方法得到相应的DOM对象二.J

jQuery源代码解析(1)—— jq基础、data缓存系统

闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的时间非常短,应该在1月.那时的版本号还是1.11.3,通过看妙味课堂的公开课视频和文档里的全部api的注解学习. 源代码则是近期些日子直接生啃.跳过了sizzle和文档处理的部分(待业狗压力大.工作以后再看).关注data.ready.event.queue.Defferred(jq的promise

JQ基础之选择器

JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $('.two')   ( '.'代表类 ) 元素选择器 $('ul') ( 选取'ul'标签 ) $('#one>span') 属性选择器 $('[class]')    ( 所有具有'class'属性的元素 ) $('li[class]')           ( 选中'li'下的具有'class

JQ基础样式篇

1-1 官方网站 http://jquery.com/download/ ,jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可. jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样是为了兼容移动端开发.由于减少了一些代码,更小.更快. jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(develop

网页JQ基础之jq-隐藏以及显示特效

简单的 隐藏以及显示的 JQ 的代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $(&q

jq基础2选择器1

html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <!--<link href="css.css" type="text

jq基础第4版学习

html部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>选择元素</title> <link href="cssjq.css" type="text/css" r

jq基础学习

http://www.cnblogs.com/kissdodog/archive/2012/11/20/2779964.html /**  * Created by Administrator on 2015/4/4 0004.  */ /*$(function(){     $('input').click(function(){         alert('jqcode')     }) })*/ /*$(function(){     alert(1); }) $(function(){

jq基础2选择器2

子元素选择器 :nth-child('intn').css() intn如3n就是3的倍数 或者 :nth-child('intn+1').css() i 其他方法 dom(1) css css方法属性 jq dom(1)(动态的) 创建节点 var none=$('<div id="box">text</div>') 插入节点(插入到那些位置) $('body').append(none) 插入节点的方法 jq dom(2) 包裹节点 删除节点 表单选择器 常