js和jquery的基本应用

Posted 2021-12-03 xu1115

定义：

　　jquery => js的dom操作进行封装，简化了js操作　　//jquery就是把js封装成一个更简便的方法

　　jquery和js区别：找到元素，操作元素

　　只要看见 $ 符号就代表jquery，除非是自己定义了个方法

 

　　注意：想要用jquery方法，必须必须必须  先  引入jqeuy文件

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

 

　　找元素

　　js -> jquery　　 js元素转化成jquery元素用   $( jsdom )
　　jquery -> js jquery元素转化成js元素用   $("button")[0]   或者   $("button") . get(0)

　　js页面加载方法：

　window.onload=function(){

　　}

　　jquery页面加载方法一：

　$(document).ready(function(){

　　})

　　jquery页面加载方法二：

　$(function(){

　　})

　　操作内容

　　//js对象=> jsdom 　　jquery对象=> jqdom
　　获取：jsdom . innerhtml　　赋值：jsdom.innerHTML="这是要填的内容";　　//innerHTML是给非表单元素填内容
　　获取：jsdom . value　　　　赋值：jsdom.value="这是要填的内容";　　//value是给表单元素填内容

　　获取：jqdom . html() 　　赋值：jqdom.html("这是要填的内容")//这里可以添加标签　　//html()是给非表单元素填内容
　　获取：jqdom . val() 　　 赋值：jqdom.val("这是要填的内容")　　//val()是给表单元素填内容
　　/*操作内容结束*/

　　/*操作样式*/
　　jsdom.style.color

　　获取：jqdom.css("color")　　赋值方法一： jqdom.css("color","red")
　　赋值方法二：jqdom.css({　　//json格式:大括号，内容赋值用：，每个用逗号隔开
　　　　　　　　　　　"css":"red",
　　　　　　　　　　　"width":"120px",
　　　　　　　　　　　...
　　　　　　　　})

　　操作属性

　　jsdom.setAttribute("class","c1")　　//js设置元素的属性
　　jsdom.getAttribute("class")　　//js获取元素属性
　　jsdom.removeAttribute("class")　　//js移除元素属性
　　jsdom.style.color //这个方法必须是非常清楚这个属性有的才可以用

　　获取：jqdom.attr("class") 　　赋值方法一：jqdom.attr("class","c1")　　移除：jqdom.removeattr("class")
　　赋值方法二：jqdom.attr({　　　　// json格式:大括号，内容赋值用：，每个用，隔开
　　　　　　　　　　"id":"btn",
　　　　　　　　　　"class":"c1",
　　　　　　　　　　...
　　　　　　　　})
　　jqdom.removeClass(classname)　　//移除jq对象样式
　　jqdom.addClass(classname)　　//给jq对象添加样式

　　操作事件

jsdom.onClick=function(){
　　this　　//代表当前标签
}

jqdom.click(function(){
　　$(this) 　　//这个this是js对象，必须用$转化成jquery，然后可以用jquery方法了
})

　　遍历

$("img").each(function(i,item){　　//i代表下标，item代表具体值
                
 })