jquery基本操作

1.jQuery的基本操作;

　　1) innerhtml和innertext

　　　　修改:innerhtml可以放html片段，并且可以解析;

　　　　　　 innertext可以放html片段,但是不会解析;

　　　　访问:innerhtml是访问一串html代码;

　　　　　　 innertext是访问标签中的内容;

<script>
var city = document.getElementById("city");console.log(city.innerHTML);console.log(city.innerText);city.innerText = "<li>你好</li>";
</script>

　　2) val()

　　　　封裝原生的value屬性主要是用於表單元素

　　3) attr()

　　　　可以设置一个属性，也可以设置多个属性　

$("#city").attr("class","d1")   　　//设置一个
$("#city").attr({     　　　　　　　　//设置多个"name" : "zhangsan","age" : "30"})console.log($("#city").attr("class"))   //不传递参数就是访问$("#city").removeAttr("class")    //删除指定的属性

2.样式操作

　　1) attr()方法

//   <button id="btn1">attr()方法</button>$("#btn1").click(function(){$("#div1").attr({class : "one"})})

　　2) 追加样式: addClass(" ")

//<button id="btn2">追加样式</button>$("#btn2").click(function(){$("#div1").addClass("two")})

　　3) 删除样式:removeClass()

//<button id="btn3">删除样式</button>$("#btn3").click(function(){$("#div1").removeClass()    //如果不传递参数就是删除所有，    $("#div1").removeClass("two")     //传递参数就是删除某个})

　　4) 切换样式: toggleClass(" ")

//<button id="btn4">切换样式</button>$("#btn4").click(function(){//如果有这个样式就删除,如果没有就增加$("#div1").toggleClass("two")  })

　　5) 判断样式: hasClass(" ")

// <button id="btn5">判断样式</button>$("#btn5").click(function(){console.log($("#div1").hasClass("two"))   //判断这个样式是否存在在这个dom上面})

　　6) css( ) 方法

　　　　取得第一个段落的color样式属性的值。

$("p").css("color");

　　　　将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css({ "color": "#ff0011", "background": "blue" });

　　　　将所有段落字体设为红色

$("p").css("color","red");

　　　　逐渐增加div的大小

$("div").click(function() {$(this).css({width: function(index, value) {return parseFloat(value) * 1.2;}, height: function(index, value) {return parseFloat(value) * 1.2;}});});

3.创建节点　

<ul><li>北京</li><li>天津</li><li>南京</li>
</ul><script>
//            原生的dom
//            创建一个武汉节点,加入到ul中var $li = $("<li></li>");
            $li.text("武汉");$li.attr("id","wuhan");
//            2.添加到ul中
            $("ul").append($li)   //内部插入    </script>

4.遍历节点

<ul id="city" name="城市列表"><li>北京<ul><li>海淀区</li><li>朝阳区</li></ul></li><li>天津</li><li>上海</li><li>重庆</li><li>南京</li>
</ul>

　　1) 所有子元素:children()

　　　　获取第一个ul元素中所有子元素的个数

console.log($("ul:first").children().length)

　　2) 获取第N个元素:get([index])

　　　　获取ul元素中的第三个子元素的文本

console.log($("ul:first").children(":eq(2)").text())
console.log($("ul:first").children().get(2).innerText)
console.log($("ul:first").children()[2].innerText)
console.log($($("ul:first").children().get(2)).text())

　　3) 父元素:parent()

　　　　获取上海这个元素的父元素的name属性

console.log($($("ul:first").children().get(2)).parent().attr("name"))

　　4) 兄弟元素:prev(),next()

　　　　获取上海这个元素的上一个兄弟元素和下一个兄弟元素

console.log($("ul:first").children(":eq(2)").prev().text())
console.log($("ul:first").children(":eq(2)").next().text())

　　5)同辈元素:siblings()

　　　　获取上海这个元素的兄弟元素的所有个数

console.log($("ul:first").children(":eq(2)").siblings().length)

　　　　找到每个div的所有同辈元素中带有类名为selected的元素。

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

$("div").siblings(".selected")
// <p class="selected">Hello Again</p>

　　6)所有与指定表达式匹配的元素:find()

　　　　获取ul中所有的li的个数

console.log($("ul li").length)
console.log($("ul").find("li").length)

5.内部插入

　　1) append(content|fn)

　　　　把后面的东西插入到了前面的子节点中（追加）

$("#tj").append($("#xj"))

　　2)appendTo(content)

　　　　把前面的东西插入到了后面的子节点中（追加）

$("#tj").appendTo($("#xj"))

　　3) prepend(content|fn)

　　　　把后面的东西插入到了前面的子节点中（前面插入）

$("#tj").prepend($("#xj"))

　　4)prependTo(content)

　　　　把前面的东西插入到了后面的子节点中（前面插入）

$("#tj").prependTo($("#xj"))

6.外部插入

　　1) after(content|fn)

　　　　把后面的插入到了前面的下一个兄弟的位置

$("#tj").after($("#xj"))

　　2) before(content|fn)

　　　　把后面的插入到了前面的上一个兄弟的位置

$("#tj").before($("#xj"))

　　3) insertAfter(content)

　　　　把前面的插入到了后面的下一个兄弟

$("#tj").insertAfter($("#xj"))

　　4) insertBefore(content)

　　　　把前面的插入到了后面的上一个兄弟的位置

$("#tj").insertBefore($("#xj"))

7.删除节点

　　empty()　谋杀式的

　　remove([expr]) 自杀式

<body><ul id="city"><li id="bj">北京</li><li id="tj">天津</li><li id="sh">上海</li></ul><script>
//            var sh = document.getElementById("sh");
//            console.log(sh.remove())    //这个是没有返回值的     自杀式
//            var city = document.getElementById("city");
//            console.log(city.removeChild(sh))    //这个是相当于剪贴操作     谋杀式
            empty()      //谋杀式的
        　　$("#sh").empty()remove([expr])    //自杀式
            $("#sh").remove();</script></body>

8.替换节点

　　replaceWith(content|fn): 将所有匹配的元素替换成指定的HTML或DOM元素
　　replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素

$("p").replaceWith($("<button>按钮</button>"))  //把p换成按钮$("<p>这是一个段落.</p>").replaceAll($("button"))    //把所有的按钮换成p

9.复制节点

　　clone([Even[,deepEven]])

　　　　克隆匹配的DOM元素并且选中这些克隆的副本

<body><button>按钮</button><p>这是一个段落.</p><script>$("button").click(function(){console.log("hello world")})$("button").clone(true).appendTo($("p"))    //注意true的作用，表示事件是否会被克隆</script>
</body>

jquery基本操作相关推荐

jQuery 基本操作
2019独角兽企业重金招聘Python工程师标准>>> jQuery 基本操作 jQuery 是一个轻量级的javascript类库, 只有14k(未压缩的版本有77k) jQuer ...
jquery基本操作笔记
jq和js 可以共存,不能混用: $('.box').css('background','red'); $(".box").css({ color: "#ff0011&q ...
JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果
JQuery 基本使用原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象 (伪数组形式存储) 不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $ ...
jQuery选择器及jQuery基本操作
吐血整理,如有错误,欢迎指出,感激不尽~ 目录 1. jq选择器 2. 属性操作 3. Class操作 4. 样式操作 5. 内容操作 6. 尺寸操作 1. jq选择器 jq的选择器,就是在执行jq函 ...
jQuery基本操作--制作QQ简易聊天框
需求: 训练要点 1 .使用 html( ) 获取和设置页面内容 2 .使用 val( ) 获取聊天内容 3 .使用 addClass( ) 为指定元素追加样式 4 .使用数组保存聊天人员头像和昵称 ...
JQuery 基础知识学习（详尽版）
JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...
笔记12:JQuery
JQuery( /'kwɪərɪ/) 基础: 1. 概念: 一个JavaScript框架.简化JS开发* jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的 ...
jQuery 基础概念总结
文章目录一.JQuery的基本概念 1.JQuery的封装原理 2.jQuery选择器 id选择器类选择器标签选择器组合选择器二.jQuery基本操作 1.操作元素属性查询元素属性修改元 ...
Web前端 jQuery
1.初始jQuery 1.1.jQuery是什么? jQuery由美国人John Resig于2006年创建,jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"wr ...

jquery基本操作

jquery基本操作相关推荐

最新文章

热门文章