jq基础

Posted 2020-08-29 xiao_style

$(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事件监听*/