monacaでそもそもjs が動かない

monaca初心者です。　現在　OnsenUI V2 Js Splterで簡単なアプリを作ろうと思っているのですが、例えば、HOME画面に画像を張ってその大きさをJSで操作する　というようなことをしたいときは、どのようにすればいいでしょうか？

(下のコードはほぼテンプレのままです）

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15<script src="script1.js"></script>
16<!-- index.htmlが長くなるので、この上のJSコードは別の所に移動しました-->
17
18</head>
19<body>
20
21
22  <ons-splitter>
23    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
24      <ons-page>
25        <ons-list>
26          <ons-list-item onclick="fn.load('home.html')" tappable>
27            Home
28          </ons-list-item>
29          <ons-list-item onclick="fn.load('settings.html')" tappable>
30            Settings
31          </ons-list-item>
32          <ons-list-item onclick="fn.load('about.html')" tappable>
33            About
34          </ons-list-item>
35        </ons-list>
36      </ons-page>
37    </ons-splitter-side>
38    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
39  </ons-splitter>
40
41  <ons-template id="home.html">
42    <ons-page>
43      <ons-toolbar>
44        <div class="left">
45          <ons-toolbar-button onclick="fn.open()">
46            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
47          </ons-toolbar-button>
48        </div>
49        <div class="center">
50          Main
51        </div>
52      </ons-toolbar>
53
54<!-- とりあえずここら辺においてみる-->
55    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
56    <script src="style1.js"></script>
57   <img src="gazou.png"  id="img1" >
58
59
60    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
61    Swipe right to open the menu!
62    </p>
63        
64    </ons-page>
65  </ons-template>
66
67  <ons-template id="settings.html">
68  <ons-page>
69    <ons-toolbar>
70      <div class="left">
71        <ons-toolbar-button onclick="fn.open()">
72          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
73        </ons-toolbar-button>
74      </div>
75      <div class="center">
76        Settings
77      </div>
78    </ons-toolbar>
79  </ons-page>
80  </ons-template>
81
82  <ons-template id="about.html">
83  <ons-page>
84    <ons-toolbar>
85      <div class="left">
86        <ons-toolbar-button onclick="fn.open()">
87          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
88        </ons-toolbar-button>
89      </div>
90      <div class="center">
91        About
92      </div>
93    </ons-toolbar>
94  </ons-page>
95  </ons-template>
96 
97
98</body>
99</html>
100

とりあえずSwipe right to open the menu!の近くに画像とJSを置いてみたのですが、画像が表示されません。
また、Swipe right to open the menu!の近くに画像のみを置き、上のほう( <body> のすぐ下）にJSを置いたところ、JS自体は動いているのですが、画像にスタイルが適応されません

どのように解決すればよいでしょうか？

一応style.js

javascript
1//style.js
2$(function () {
3//縮尺調整
4var s1=5;
5var s2=5;
6
7// 画面幅
8var W=screen.width;
9// 画面高
10var H=screen.height;
11
12console.log(W);
13console.log(H);
14
15$("#img1").css({
16    position: "absolute",
17    top: H / (2*s1) + "px",
18    left: W / (2*s1) + "px",
19    width: W / (s2/2) + "px",
20    width:"10 px"
21});
22
23});